edv/VERAG_Homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Änderungen fast aller pixel werte zu responsive Werten um möglichst viele Geräte abzudecken. Tests am Handy erfolgreich! (Alle pixel weg bis auf die Werte zum zu und aufklappen des Seitenmenüs)

Browse Source
This commit is contained in:
ja
2021-08-06 15:49:21 +02:00
parent 53e9a09791
commit c427e3de4e
3 changed files with 109 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
AvisoTV_FLEX.aspx
View File

@@ -74,7 +74,6 @@
<!-- <link rel="stylesheet" type="text/css" href="css/edit_main.css"> --> <!-- <link rel="stylesheet" type="text/css" href="css/edit_main.css"> -->
<style> <style>
#headertable:hover{ #headertable:hover{
background-color:aliceblue; background-color:aliceblue;
} }
@@ -94,9 +93,7 @@
display: none; display: none;
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
min-width:160px; min-width:160px;
min-width: 10em;
min-width: 20.833333333333336vw;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; z-index: 1;
} }
@@ -128,14 +125,15 @@
table{ table{
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0px; border-spacing: 0px;
width: 100%; width: 60%;
border: 1px solid #ddd; border: 1px solid #ddd;
border:0.13020833333333331vw solid #ddd; border:1px solid #ddd;
background-color:white; background-color:white;
color:#043381; color:#043381;
} }
#flex-container{ #flex-container{
width:2600px; width:1800px;
} }
/*Modal*/ /*Modal*/
@@ -146,8 +144,8 @@
.modal-dialog { .modal-dialog {
height: 100% !important; /* required */ height: 100% !important; /* required */
margin: 0 0.5rem !important; margin: 0 0.8px !important;
padding: 0.5rem 0 !important; padding: 8px 0 !important;
overflow-y: auto !important; /* required */ overflow-y: auto !important; /* required */
width: 100%; width: 100%;
position: center; position: center;
@@ -184,42 +182,41 @@
} }
/*Button Dropdown Menue Language Picker*/ /*Button Dropdown Menue Language Picker*/
.dropbtn { .dropbtn {
background-color: #fff; background-color: #fff;
left: 65%; left: 65%;
right: auto; right: auto;
width: 100px; width: 100px;
width: 13.020833333333334vw; height: 20%;
height: 20%; position: relative;
position: relative; color: #043381;
color: #043381; padding: 0px;
padding: 0px; font-size:16px;
font-size:16px; font-size: 1em;
font-size: 1em; border: none;
font-size:2.083333333333333vw; z-index:512;
border: none; }
z-index:512;
}
/* Dropdown Content (Hidden by Default) */ /* Dropdown Content (Hidden by Default) */
.dropdown-content { .dropdown-content {
display: none; display: none;
position: relative; position: relative;
left: 65%; left: 65%;
color:#043381; color:#043381;
background-color: #fff; background-color: #fff;
min-width: 10em; min-width: 30px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000; z-index: 1000;
} }
/* Links inside the dropdown */ /* Links inside the dropdown */
.dropdown-content a { .dropdown-content a {
color: black; color: black;
padding: 0.75em 1em; /*padding: 12px 16px;*/
text-decoration: none; padding: 0.8492569002123143vw 1.132342533616419vw;
z-index:812; text-decoration: none;
} z-index:812;
}
/* Change color of dropdown links on hover */ /* Change color of dropdown links on hover */
.dropdown-content a:hover { .dropdown-content a:hover {
@@ -248,18 +245,27 @@
.navbar-nav { .navbar-nav {
margin-left: auto; margin-left: auto;
} }
li { li {
list-style-type: none; list-style-type: none;
} }
@media (min-width: 768px) { @media (max-width: 768px){
#offcanvasWithBothOptions { table {
min-width: 21.875em; border-collapse: collapse;
max-width: 21.875em; border-spacing: 2px;
width: 100%;
border: 1px solid #ddd;
background-color: white;
color: #043381;
overflow-x:auto;
} }
} }
.clearfix { @media (min-width: 768px) {
overflow: auto; #offcanvasWithBothOptions {
} min-width: 17.692852087756545vw;
max-width: 17.692852087756545vw;
}
}
</style> </style>
<script src="js/netzwerk.js" type="text/javascript"></script> <script src="js/netzwerk.js" type="text/javascript"></script>
@@ -393,9 +399,9 @@
<nav class="navbar navbar-expand-lg navbar-light"> <nav class="navbar navbar-expand-lg navbar-light">
<li class="nav-item"> <li class="nav-item">
<a class="navbar-brand" href="newpageJulius_Sidebar.aspx"><img src="images/Logo_small.png" alt="Schriftzug: Verag AG Blaue Schrift: Verag Spedition Graue Schrift: AG" data-toggle="tooltip" data-placement="top" title="https://www.verag.ag"></a> <a class="navbar-brand" href="newpageJulius_Sidebar.aspx"><img src="images/Logo_small.png" alt="Schriftzug: Verag AG Blaue Schrift: Verag Spedition Graue Schrift: AG" data-toggle="tooltip" data-placement="top" title="https://www.verag.ag"></a>
</li> </li>
</nav> </nav>
</div> </div>
<!-- Webiste-Content--> <!-- Webiste-Content-->
<h1>Verag AVISO-TV Online</h1> <h1>Verag AVISO-TV Online</h1>
<div id="line"></div> <div id="line"></div>
@@ -431,8 +437,8 @@
'%> '%>
<h2><%=STANDORT %></h2> <h2><%=STANDORT %></h2>
</span> </span>
<div="clearfix">
<div class="container-xxl" style="overflow-y:auto;scroll-padding-inline:auto;max-width:97%"> <div class="container-xxl" style="overflow-y:auto;scroll-padding-inline:auto;max-width:100%">
<table class="table table-hover" border="8" cellspacing="0" contenteditable="false"> <table class="table table-hover" border="8" cellspacing="0" contenteditable="false">
<thead style="background-color:#043381; color:white; font-weight:900"><tr ><th>Nr.</th><th>LKW Kennzeichen</th><th>Frächter</th><th>Avisierer</th><th>Ankunft</th><th>Dauer</th><th>LKW fertig</th></tr></thead> <thead style="background-color:#043381; color:white; font-weight:900"><tr ><th>Nr.</th><th>LKW Kennzeichen</th><th>Frächter</th><th>Avisierer</th><th>Ankunft</th><th>Dauer</th><th>LKW fertig</th></tr></thead>
<% <%
@@ -483,7 +489,7 @@
Next Next
%> %>
</table> </table>
</div></div></div> </div></div>
<% <%
End If End If
End If End If

14
newpageJulius_Sidebar.aspx
View File

@@ -116,7 +116,7 @@
.navbar { .navbar {
position:relative; position:relative;
padding: 25px 30px; padding: 25px 30px;
padding: 1.563em 1.875em; padding: 1.563em 1.875em;
background: #fff; background: #fff;
border: none; border: none;
@@ -303,7 +303,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
#sidebar { #sidebar {
margin-left: -15.625rem; margin-left: -250px;
padding-top:0.5em; padding-top:0.5em;
font-size:1em; font-size:1em;
font-size:2.083333333333333vw; font-size:2.083333333333333vw;
@@ -362,9 +362,9 @@
@media (min-width: 768px) { @media (min-width: 768px) {
#sidebar { #sidebar {
margin-left: -15.625rem; margin-left: -250px;
padding-top:0.86em; padding-top:0.86em;
font-size:1.25em; font-size:1.125em;
} }
#content{ #content{
font-size: 1rem; font-size: 1rem;
@@ -464,8 +464,8 @@
.offcanvas-body { .offcanvas-body {
background-color:#fff; background-color:#fff;
color:#043381; color:#043381;
font-size:2.213541666666667vw; font-size: 1.7692852087756545vw;
font-size:1.063em; font-size:1.563em;
} }
.offcanvas-body ul li :hover{ .offcanvas-body ul li :hover{
background-color:#043381; background-color:#043381;
@@ -828,7 +828,7 @@
<div class="align-self: center"></div> <div class="align-self: center"></div>
<span>Menue</span> <span>Menue</span>
</button> </button>
<a class="navbar-brand" href="newpageJulius_Sidebar.aspx?lan2=DE"><img src="images/Logo_small.png" alt="VERAG Spedition AG Logo with blue art until grey AG" data-toggle="tooltip" data-placement="top" title="https://www.verag.ag"></a> <a class="navbar-brand" href="newpageJulius_Sidebar.aspx?lan2=DE"><img src="images/Logo_small.png" style="width:initial;height:initial;" alt="VERAG Spedition AG Logo with blue art until grey AG" data-toggle="tooltip" data-placement="top" title="https://www.verag.ag"></a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions" style="background-color:#fff; color:#043381;"><img id="myImage" src="<%=flagpath%>" style="border:1px solid #fff;width:30px;"/></button> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions" style="background-color:#fff; color:#043381;"><img id="myImage" src="<%=flagpath%>" style="border:1px solid #fff;width:30px;"/></button>
</nav> </nav>
</div> </div>

71
status_Julius.aspx
View File

@@ -98,7 +98,7 @@
color: #fff; color: #fff;
background-color: #043381; background-color: #043381;
border-color: #0a58ca; border-color: #0a58ca;
box-shadow: 0 0 0 .25rem rgba(49,132,253,.5) box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5)
} }
.btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle { .btn-check:active + .btn-primary, .btn-check:checked + .btn-primary, .btn-primary.active, .btn-primary:active, .show > .btn-primary.dropdown-toggle {
color: #fff; color: #fff;
@@ -117,7 +117,7 @@
/*# sourceMappingURL=bootstrap.min.css.map */ /*# sourceMappingURL=bootstrap.min.css.map */
.alert { .alert {
width:83em; width:83em;
width:1328px; /* width:1328px;*/
width: 172.91666666666669vw; width: 172.91666666666669vw;
} }
li { li {
@@ -130,9 +130,7 @@
} }
.dropdown{ .dropdown{
margin-top:-23px; margin-top:-23px;
margin-top: -1.438em;
margin-top:-2.994791666666667vw;
margin-right:5% margin-right:5%
} }
/*Button Dropdown Menue Language Picker*/ /*Button Dropdown Menue Language Picker*/
@@ -216,14 +214,14 @@
font-size: 1.25em; font-size: 1.25em;
} }
#content{ #content{
font-size:1.25em; font-size:20px;
max-width:100%; max-width:100%;
min-width:70%; min-width:70%;
} }
#footer_content{ #footer_content{
font-size:0.4em; font-size:0.4em;
font-size:0.8333333333333334vw; font-size:0.8333333333333334vw;
padding-inline:1px; padding-inline:0.063em;
padding-inline:0.13020833333333331vw; padding-inline:0.13020833333333331vw;
max-width:100%; max-width:100%;
min-width:60%; min-width:60%;
@@ -241,7 +239,7 @@
font-size:0vw; font-size:0vw;
} }
#navbarDropdown{ #navbarDropdown{
font-size:13.76px; /* font-size:13.76px;*/
font-size:0.86em; font-size:0.86em;
font-size: 1.7916666666666667vw; font-size: 1.7916666666666667vw;
} }
@@ -249,22 +247,25 @@
font-size:initial; font-size:initial;
} }
#sidebar.active { #sidebar.active {
margin-left: 0; margin-left: 0rem;
} }
#sidebarCollapse span { #sidebarCollapse span {
display:compact; display:compact;
} }
table th td { table th td {
font-size: 45px; font-size: 1.438em;
display:block; display:block;
} }
tbody{ tbody{
height:150px; font-size:18px;
height: 11.71875vh; font: 1.125em;
height: auto;
width: fit-content; width: fit-content;
overflow-y:auto; overflow-y:auto;
overflow-x:hidden; overflow-x:hidden;
flex-wrap:wrap;
} }
#conovertab{ #conovertab{
overflow-x:auto; overflow-x:auto;
} }
@@ -278,23 +279,26 @@
@media (min-width: 768px){ @media (min-width: 768px){
#sidebar { #sidebar {
margin-left: -250px; margin-left: /*-250px*/-15.625rem;
padding-top:0.5em; padding-top:0.5em;
font-size:1.2em; padding-top:0.6254886630179828vh;
/* font-size:18px;*/
font-size:1.563em;
} }
#content{ #content{
font-size:2em; font-size:1.563em;
max-width:50%; max-width:50%;
min-width:50%; min-width:50%;
margin-left:0.25em; margin-left:0.25rem;
margin-right:0.25em; margin-right:0.25rem;
margin-left:4px; /*margin-left:4px;
margin-right:4px; margin-right:4px;*/
} }
#footer_content{ #footer_content{
font-size:0.4em; font-size:0.4em;
font-size: 0.8333333333333334vw; font-size: 0.8333333333333334vw;
padding-inline:1px; /*padding-inline:1px;*/
padding-inline:0.09em;
max-width:100%; max-width:100%;
min-width:60%; min-width:60%;
} }
@@ -307,6 +311,7 @@
} }
nav-item dropdown::marker{ nav-item dropdown::marker{
font-size: 0em; font-size: 0em;
font-size:0rem;
font-size:0vw; font-size:0vw;
overflow:hidden; overflow:hidden;
} }
@@ -320,7 +325,7 @@
background-color:#fff; background-color:#fff;
} }
#sidebar.active { #sidebar.active {
margin-left: 0; margin-left: 0rem;
} }
#rowTable{ #rowTable{
width:120%; width:120%;
@@ -346,7 +351,7 @@
background-color: #0741a7; background-color: #0741a7;
border-color: #043381; border-color: #043381;
} }
table{ table {
font-size: 1em; font-size: 1em;
font-size:1.150066666666665vw; font-size:1.150066666666665vw;
} }
@@ -361,8 +366,8 @@
width:60%; width:60%;
} }
li { li {
list-style-type: none; list-style-type: none;
} }
navbar { navbar {
@@ -457,7 +462,7 @@
<!-- Page Content --> <!-- Page Content -->
<div class="container"> <div class="container">
<div class="align-content-center" style="margin-top:5px;margin-top:0.313em; margin-top:0.6510416666666667vw;"> <div class="align-content-center" style="/*margin-top:5px;*/margin-top:0.313rem; margin-top:0.6510416666666667vw;">
<div class="content"> <div class="content">
<div class="d-none d-md-block"> <div class="d-none d-md-block">
<nav class="navbar navbar-expand-md navbar-light bg-light" style="background-color:#fff;"> <nav class="navbar navbar-expand-md navbar-light bg-light" style="background-color:#fff;">
@@ -598,17 +603,17 @@
End Select End Select
End If%> End If%>
<div class="d-md-none"> <div class="d-md-none">
<table style="width:100%" class="table-responsive"><tr> <td> <table style="width:100%" class="table-responsive"><tr> <td>
<table> <table>
<tr><td style="width:150px"></td><td></td></tr> <tr><td style="/*width:150px*/ width:9.375em;width=10.615711252653927vw"></td><td></td></tr>
<tr><td><b><%= LT.getTxt(3, lan, "LKW-Kennzeichen") %>:</b></td><td><span style="font-size:1.25em"><%= AVISO.LKW_Nr %></span></td></tr> <tr><td><b><%= LT.getTxt(3, lan, "LKW-Kennzeichen") %>:</b></td><td><span style="font-size:1.25em"><%= AVISO.LKW_Nr %></span></td></tr>
<tr><td><b><%= LT.getTxt(14, lan, "LKW-ID") %>:</b></td><td><%= AVISO.AvisoID %></td></tr> <tr><td><b><%= LT.getTxt(14, lan, "LKW-ID") %>:</b></td><td><%= AVISO.AvisoID %></td></tr>
<tr style="height:10px"></tr> <tr style="height:10px"></tr>
<tr><td><b><%= LT.getTxt(4, lan, "Avisierer") %>:</b></td><td><%= AVISO.Auftraggeber %></td></tr> <tr><td><b><%= LT.getTxt(4, lan, "Avisierer") %>:</b></td><td><%= AVISO.Auftraggeber %></td></tr>
<tr><td><b><%= LT.getTxt(8, lan, "Frachtführer") %>:</b></td><td><%= AVISO.Frächter %></td></tr> <tr><td><b><%= LT.getTxt(8, lan, "Frachtführer") %>:</b></td><td><%= AVISO.Frächter %></td></tr>
<tr style="height:10px"></tr> <tr style="/*height:10px*/height=0.7818608287724785vh"></tr>
<tr><td><b>STATUS:</b></td><td><span ><% <tr><td><b>STATUS:</b></td><td><span ><%
Select Case(AVISO.Status) Select Case(AVISO.Status)
Case 0 : Response.Write("<div class=""statusLKW_Erfasst"">" & LT.getTxt(7, lan, "Erfasst") & "</div>") Case 0 : Response.Write("<div class=""statusLKW_Erfasst"">" & LT.getTxt(7, lan, "Erfasst") & "</div>")
@@ -620,7 +625,7 @@
Case Else : Response.Write("unbekannt") Case Else : Response.Write("unbekannt")
End Select End Select
%></span></td></tr> %></span></td></tr>
</table> </table>
</td><td> </td><td>
<% <%
If AVISO.AvisoEingang <> VERAG_PROG_ALLGEMEIN.cAllgemein.LeerDatum Then Response.Write("<tr><td><b>" & LT.getTxt(13, lan, "Aviso-Eingang") & ":&nbsp;&nbsp;<b></td><td>" & AVISO.AvisoEingang & "</td></tr>") If AVISO.AvisoEingang <> VERAG_PROG_ALLGEMEIN.cAllgemein.LeerDatum Then Response.Write("<tr><td><b>" & LT.getTxt(13, lan, "Aviso-Eingang") & ":&nbsp;&nbsp;<b></td><td>" & AVISO.AvisoEingang & "</td></tr>")
@@ -630,13 +635,13 @@
%> %>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="d-none d-md-block"> <div class="d-none d-md-block">
<table style="width:100%" class="table-responsive"><tr> <td> <table style="width:100%" class="table-responsive"><tr> <td>
<table> <table>
<tr><td style="width:150px"></td><td></td></tr> <tr><td style="/*width:150px;*/width:9.375em;width: 10.615711252653927vw"></td><td></td></tr>
<tr><td><b><%= LT.getTxt(3, lan, "LKW-Kennzeichen") %>:</b></td><td><span style="font-size:20px"><%= AVISO.LKW_Nr %></span></td></tr> <tr><td><b><%= LT.getTxt(3, lan, "LKW-Kennzeichen") %>:</b></td><td><span style="font-size:20px"><%= AVISO.LKW_Nr %></span></td></tr>
<tr><td><b><%= LT.getTxt(14, lan, "LKW-ID") %>:</b></td><td><%= AVISO.AvisoID %></td></tr> <tr><td><b><%= LT.getTxt(14, lan, "LKW-ID") %>:</b></td><td><%= AVISO.AvisoID %></td></tr>
@@ -716,7 +721,7 @@
</div> </div>
</div> --> </div> -->
<!-- <div style="height:20px"></div>--> <!-- <div style="height:20px"></div>-->
<span style="font-size:1em;font-size:16px;font-size:1.083333333333333vw"><%= LT.getTxt(18, lan, "Bitte haben Sie noch Geduld bis ihr Auftrag fertig ist. Sie können den aktuellen Status Ihres LKWs am Bildschirm verfolgen.<br />Bei Status ""OK"" können Sie an den Schalter kommen.") %></span> <span style="font-size:1em;font-size:16px;font-size:1em"><%= LT.getTxt(18, lan, "Bitte haben Sie noch Geduld bis ihr Auftrag fertig ist. Sie können den aktuellen Status Ihres LKWs am Bildschirm verfolgen.<br />Bei Status ""OK"" können Sie an den Schalter kommen.") %></span>
<% End If %> <% End If %>
<div id="abstand"></div> <br /> <div id="abstand"></div> <br />
@@ -726,7 +731,7 @@
</div> </div>
<div id="conovertab"> <div id="conovertab">
<div class="container-flex"> <div class="container-flex" style="flex-flow:nowrap">
<table class="tableStatus table-striped" id="tablemain" border="8" cellspacing="0"> <table class="tableStatus table-striped" id="tablemain" border="8" cellspacing="0">
<thead><tr><th ><%= LT.getTxt(20, lan, "Nr.") %></th><th ><%= LT.getTxt(21, lan, "Spedition/PosNr") %></th><th><%= LT.getTxt(22, lan, "Sendungsdaten") %></th><th><%= LT.getTxt(23, lan, "Absender") %></th><th><%= LT.getTxt(24, lan, "Empfänger") %></th><th> Status </th><th>Infos</th></tr> </thead> <thead><tr><th ><%= LT.getTxt(20, lan, "Nr.") %></th><th ><%= LT.getTxt(21, lan, "Spedition/PosNr") %></th><th><%= LT.getTxt(22, lan, "Sendungsdaten") %></th><th><%= LT.getTxt(23, lan, "Absender") %></th><th><%= LT.getTxt(24, lan, "Empfänger") %></th><th> Status </th><th>Infos</th></tr> </thead>
<% <%