Ä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)

This commit is contained in:
ja
2021-08-06 15:49:21 +02:00
parent 53e9a09791
commit 93e2645b2f
3 changed files with 117 additions and 106 deletions

View File

@@ -74,7 +74,6 @@
<!-- <link rel="stylesheet" type="text/css" href="css/edit_main.css"> -->
<style>
#headertable:hover{
background-color:aliceblue;
}
@@ -94,9 +93,7 @@
display: none;
position: absolute;
background-color: #fff;
min-width:160px;
min-width: 10em;
min-width: 20.833333333333336vw;
min-width:160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
@@ -128,14 +125,15 @@
table{
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
width: 60%;
border: 1px solid #ddd;
border:0.13020833333333331vw solid #ddd;
border:1px solid #ddd;
background-color:white;
color:#043381;
}
#flex-container{
width:2600px;
width:1800px;
}
/*Modal*/
@@ -146,8 +144,8 @@
.modal-dialog {
height: 100% !important; /* required */
margin: 0 0.5rem !important;
padding: 0.5rem 0 !important;
margin: 0 0.8px !important;
padding: 8px 0 !important;
overflow-y: auto !important; /* required */
width: 100%;
position: center;
@@ -184,42 +182,41 @@
}
/*Button Dropdown Menue Language Picker*/
.dropbtn {
background-color: #fff;
left: 65%;
right: auto;
width: 100px;
width: 13.020833333333334vw;
height: 20%;
position: relative;
color: #043381;
padding: 0px;
font-size:16px;
font-size: 1em;
font-size:2.083333333333333vw;
border: none;
z-index:512;
}
.dropbtn {
background-color: #fff;
left: 65%;
right: auto;
width: 100px;
height: 20%;
position: relative;
color: #043381;
padding: 0px;
font-size:16px;
font-size: 1em;
border: none;
z-index:512;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: relative;
left: 65%;
color:#043381;
background-color: #fff;
min-width: 10em;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: relative;
left: 65%;
color:#043381;
background-color: #fff;
min-width: 30px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 0.75em 1em;
text-decoration: none;
z-index:812;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
/*padding: 12px 16px;*/
padding: 0.8492569002123143vw 1.132342533616419vw;
text-decoration: none;
z-index:812;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
@@ -248,18 +245,27 @@
.navbar-nav {
margin-left: auto;
}
li {
list-style-type: none;
}
@media (min-width: 768px) {
#offcanvasWithBothOptions {
min-width: 21.875em;
max-width: 21.875em;
}
@media (max-width: 768px){
table {
border-collapse: collapse;
border-spacing: 2px;
width: 100%;
border: 1px solid #ddd;
background-color: white;
color: #043381;
overflow-x:auto;
}
}
.clearfix {
overflow: auto;
}
}
@media (min-width: 768px) {
#offcanvasWithBothOptions {
min-width: 17.692852087756545vw;
max-width: 17.692852087756545vw;
}
}
</style>
<script src="js/netzwerk.js" type="text/javascript"></script>
@@ -393,9 +399,9 @@
<nav class="navbar navbar-expand-lg navbar-light">
<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>
</li>
</nav>
</div>
</li>
</nav>
</div>
<!-- Webiste-Content-->
<h1>Verag AVISO-TV Online</h1>
<div id="line"></div>
@@ -431,8 +437,8 @@
'%>
<h2><%=STANDORT %></h2>
</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">
<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
%>
</table>
</div></div></div>
</div></div>
<%
End If
End If

View File

@@ -116,7 +116,7 @@
.navbar {
position:relative;
padding: 25px 30px;
padding: 25px 30px;
padding: 1.563em 1.875em;
background: #fff;
border: none;
@@ -303,7 +303,7 @@
@media (max-width: 768px) {
#sidebar {
margin-left: -15.625rem;
margin-left: -250px;
padding-top:0.5em;
font-size:1em;
font-size:2.083333333333333vw;
@@ -362,9 +362,9 @@
@media (min-width: 768px) {
#sidebar {
margin-left: -15.625rem;
margin-left: -250px;
padding-top:0.86em;
font-size:1.25em;
font-size:1em;
}
#content{
font-size: 1rem;
@@ -394,7 +394,7 @@
font-size:initial;
overflow:hidden;
}
#sidebar.active {
#sidebar.active {
margin-left: 0rem;
}
}
@@ -464,8 +464,8 @@
.offcanvas-body {
background-color:#fff;
color:#043381;
font-size:2.213541666666667vw;
font-size:1.063em;
font-size: 1.7692852087756545vw;
font-size:1.563em;
}
.offcanvas-body ul li :hover{
background-color:#043381;
@@ -801,7 +801,7 @@
</li>
<li>
<div class="dropdown" style="background-color:#fff; color:#043381;">
<button class="dropbtn" style="background-color:#fff;color:#043381;"> <img id="myImage" src="<%=flagpath%>" style="border:1px solid #fff;width:30px; justify-items:center"/></button>
<button class="dropbtn" style="background-color:#fff;color:#043381;"> <img id="myImage" src="<%=flagpath%>" style="border:1px solid #fff;/*width:28px;*/ width:1.75em; width: 4.582651391162029vw; justify-items:center" alt="Schriftzug: Verag AG Blaue Schrift: Verag Spedition Graue Schrift: AG"/></button>
<div class="dropdown-content">
<% Dim stringDE = "&nbsp DE"
Dim stringEN = "&nbsp EN"
@@ -811,11 +811,11 @@
Dim stringTR = "&nbsp TR"%>
<!--<a id="ButtonOesterreichLangPicker" class="btn btn-primary btn-sm" onclick="changeflag(A)" href="<%'= navParent%>?menuID=<%'= curentMenuId %>&lan=de"><img src="<%'= imgPath%>images/flags/flagge_A.gif" <%' If laenderkuerzel = "de" Then Response.Write("style='border:1px solid #000'")%> /> DE</a>-->
<a id="ButtonDeutschLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=DE" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_DE_AT.gif" <% If laenderkuerzel = "de" Then Response.Write("style='border:1px solid #000'")%>/><%=stringDE%></a>
<a id="ButtonEnglischLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=EN" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_GB.gif" <% If laenderkuerzel = "en" Then Response.Write("style='border:1px solid #000'")%>/><%=stringEN%></a>
<a id="ButtonTürkeiLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=TR" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_TR.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%>/><%=stringTR%></a>
<a id="ButtonEnglischLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=EN" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_GB.gif" <% If laenderkuerzel = "en" Then Response.Write("style='border:1px solid #000'")%>/><%=stringEN%></a>
<a id="ButtonSerbischLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=SRB" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_BIH.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%> /><%=stringBIH%></a>
<a id="ButtonSerbischZweiLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=SM" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_SM.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%> /><%=stringSRB%></a>
<a id="ButtonBulgariaLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=BG" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_BG.gif" <% If laenderkuerzel = "bg" Then Response.Write("style='border:1px solid #000'")%>/><%=stringBG%></a>
<a id="ButtonTürkeiLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=TR" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_TR.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%>/><%=stringTR%></a>
<a id="ButtonBulgariaLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=BG" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_BG.gif" <% If laenderkuerzel = "bg" Then Response.Write("style='border:1px solid #000'")%>/><%=stringBG%></a>
</div>
</div>
</li>
@@ -828,7 +828,7 @@
<div class="align-self: center"></div>
<span>Menue</span>
</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>
</nav>
</div>

View File

@@ -98,7 +98,7 @@
color: #fff;
background-color: #043381;
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 {
color: #fff;
@@ -117,7 +117,7 @@
/*# sourceMappingURL=bootstrap.min.css.map */
.alert {
width:83em;
width:1328px;
/* width:1328px;*/
width: 172.91666666666669vw;
}
li {
@@ -130,9 +130,7 @@
}
.dropdown{
margin-top:-23px;
margin-top: -1.438em;
margin-top:-2.994791666666667vw;
margin-top:-23px;
margin-right:5%
}
/*Button Dropdown Menue Language Picker*/
@@ -216,14 +214,14 @@
font-size: 1.25em;
}
#content{
font-size:1.25em;
font-size:20px;
max-width:100%;
min-width:70%;
}
#footer_content{
font-size:0.4em;
font-size:0.8333333333333334vw;
padding-inline:1px;
padding-inline:0.063em;
padding-inline:0.13020833333333331vw;
max-width:100%;
min-width:60%;
@@ -241,7 +239,7 @@
font-size:0vw;
}
#navbarDropdown{
font-size:13.76px;
/* font-size:13.76px;*/
font-size:0.86em;
font-size: 1.7916666666666667vw;
}
@@ -249,22 +247,25 @@
font-size:initial;
}
#sidebar.active {
margin-left: 0;
margin-left: 0rem;
}
#sidebarCollapse span {
display:compact;
}
table th td {
font-size: 45px;
font-size: 1.438em;
display:block;
}
tbody{
height:150px;
height: 11.71875vh;
font-size:18px;
font: 1.125em;
height: auto;
width: fit-content;
overflow-y:auto;
overflow-x:hidden;
flex-wrap:wrap;
}
#conovertab{
overflow-x:auto;
}
@@ -280,21 +281,24 @@
#sidebar {
margin-left: -250px;
padding-top:0.5em;
font-size:1.2em;
padding-top:0.6254886630179828vh;
/* font-size:18px;*/
font-size:1.563em;
}
#content{
font-size:2em;
font-size:1.563em;
max-width:50%;
min-width:50%;
margin-left:0.25em;
margin-right:0.25em;
margin-left:4px;
margin-right:4px;
margin-left:0.25rem;
margin-right:0.25rem;
/*margin-left:4px;
margin-right:4px;*/
}
#footer_content{
font-size:0.4em;
font-size: 0.8333333333333334vw;
padding-inline:1px;
/*padding-inline:1px;*/
padding-inline:0.09em;
max-width:100%;
min-width:60%;
}
@@ -307,6 +311,7 @@
}
nav-item dropdown::marker{
font-size: 0em;
font-size:0rem;
font-size:0vw;
overflow:hidden;
}
@@ -320,7 +325,7 @@
background-color:#fff;
}
#sidebar.active {
margin-left: 0;
margin-left: 0rem;
}
#rowTable{
width:120%;
@@ -346,7 +351,7 @@
background-color: #0741a7;
border-color: #043381;
}
table{
table {
font-size: 1em;
font-size:1.150066666666665vw;
}
@@ -361,8 +366,8 @@
width:60%;
}
li {
list-style-type: none;
li {
list-style-type: none;
}
navbar {
@@ -457,7 +462,7 @@
<!-- Page Content -->
<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="d-none d-md-block">
<nav class="navbar navbar-expand-md navbar-light bg-light" style="background-color:#fff;">
@@ -474,8 +479,8 @@
<div style="width:72%;display:flex;"></div>
<div class="me-auto">
<div class="dropdown" style="background-color:#fff; color:#043381;">
<button class="dropbtn"> <center><img id="myImage" src="<%=flagpath%>" style="border:1px solid #fff; border:0.063rem solid #fff; border:0.13020833333333331vw solid #fff; width:30px;" alt="Schriftzug: Verag AG Blaue Schrift: Verag Spedition Graue Schrift: AG"/></center></button>
<div class="dropdown" style="background-color:#fff; color:#043381; margin-right:9.813rem;">
<button class="dropbtn"> <center><img id="myImage" src="<%=flagpath%>" style="border:1px solid #fff;/*width:28px;*/ width:1.75em; width: 4.582651391162029vw; justify-items:center;" alt="Schriftzug: Verag AG Blaue Schrift: Verag Spedition Graue Schrift: AG" /></center></button>
<div class="dropdown-content">
<% Dim stringDE = "&nbsp DE"
Dim stringEN = "&nbsp EN"
@@ -485,11 +490,11 @@
Dim stringTR = "&nbsp TR"%>
<!--<a id="ButtonOesterreichLangPicker" class="btn btn-primary btn-sm" onclick="changeflag(A)" href="<%'= navParent%>?menuID=<%'= curentMenuId %>&lan=de"><img src="<%'= imgPath%>images/flags/flagge_A.gif" <%' If laenderkuerzel = "de" Then Response.Write("style='border:1px solid #000'")%> /> DE</a>-->
<a id="ButtonDeutschLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=DE" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_DE_AT.gif" <% If laenderkuerzel = "de" Then Response.Write("style='border:1px solid #000'")%>/><%=stringDE%></a>
<a id="ButtonTürkeiLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=TR" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_TR.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%>/><%=stringTR%></a>
<a id="ButtonEnglischLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=EN" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_GB.gif" <% If laenderkuerzel = "en" Then Response.Write("style='border:1px solid #000'")%>/><%=stringEN%></a>
<a id="ButtonSerbischLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=SRB" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_BIH.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%> /><%=stringBIH%></a>
<a id="ButtonSerbischZweiLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=SM" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_SM.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%> /><%=stringSRB%></a>
<a id="ButtonBulgariaLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=BG" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_BG.gif" <% If laenderkuerzel = "bg" Then Response.Write("style='border:1px solid #000'")%>/><%=stringBG%></a>
<a id="ButtonTürkeiLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=TR" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_TR.gif" <% If laenderkuerzel = "yu" Then Response.Write("style='border:1px solid #000'")%>/><%=stringTR%></a>
<a id="ButtonBulgariaLangPicker" class="btn btn-primary btn-sm" href="<%= navParent%>&lan2=BG" style="background-color:#fff;color:#043381;"><img src="<%= imgPath%>images/flags/flagge_BG.gif" <% If laenderkuerzel = "bg" Then Response.Write("style='border:1px solid #000'")%>/><%=stringBG%></a>
</div>
</div>
</div>
@@ -598,17 +603,17 @@
End Select
End If%>
<div class="d-md-none">
<div class="d-md-none">
<table style="width:100%" class="table-responsive"><tr> <td>
<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(14, lan, "LKW-ID") %>:</b></td><td><%= AVISO.AvisoID %></td></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(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 ><%
Select Case(AVISO.Status)
Case 0 : Response.Write("<div class=""statusLKW_Erfasst"">" & LT.getTxt(7, lan, "Erfasst") & "</div>")
@@ -620,7 +625,7 @@
Case Else : Response.Write("unbekannt")
End Select
%></span></td></tr>
</table>
</table>
</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>")
@@ -630,13 +635,13 @@
%>
</td>
</tr>
</table>
</table>
</div>
<div class="d-none d-md-block">
<table style="width:100%" class="table-responsive"><tr> <td>
<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(14, lan, "LKW-ID") %>:</b></td><td><%= AVISO.AvisoID %></td></tr>
@@ -716,7 +721,7 @@
</div>
</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 %>
<div id="abstand"></div> <br />
@@ -726,7 +731,7 @@
</div>
<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">
<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>
<%