wirtz
/
AutoConnect
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed the layout collapse of the input box

Browse Source
pull/83/head
Hieromon Ikasamo 6 years ago
parent da0bc5331f
commit 25395a0741
1 changed files with 83 additions and 79 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 162
      src/AutoConnectPage.cpp

162
src/AutoConnectPage.cpp
Unescape View File

@ -29,45 +29,45 @@ const char AutoConnect::_CSS_BASE[] PROGMEM = {
"-ms-text-size-adjust:100%;" "-ms-text-size-adjust:100%;"
"-webkit-text-size-adjust:100%;" "-webkit-text-size-adjust:100%;"
"-moz-osx-font-smoothing:grayscale;" "-moz-osx-font-smoothing:grayscale;"
"-webkit-font-smoothing:antialiased;" "-webkit-font-smoothing:antialiased"
"}" "}"
"body{" "body{"
"margin:0;" "margin:0;"
"padding:0;" "padding:0"
"}" "}"
".base-panel{" ".base-panel{"
"margin:0 22px 0 22px;" "margin:0 22px 0 22px"
"}" "}"
".base-panel>*>label{" ".base-panel>*>label{"
"display:inline-block;" "display:inline-block;"
"width:3.0em;" "width:3.0em;"
"text-align:right;" "text-align:right"
"}" "}"
".base-panel>*>label.slist{" ".base-panel>*>label.slist{"
"width:auto;" "width:auto;"
"font-size:0.9em;" "font-size:0.9em;"
"margin-left:10px;" "margin-left:10px;"
"text-align:left;" "text-align:left"
"}" "}"
"input{" "input{"
"-moz-appearance:none;" "-moz-appearance:none;"
"-webkit-appearance:none;" "-webkit-appearance:none;"
"font-size:0.9em;" "font-size:0.9em;"
"margin:8px 0 auto;" "margin:8px 0 auto"
"}" "}"
".lap{" ".lap{"
"visibility:collapse;" "visibility:collapse"
"}" "}"
".lap:target{" ".lap:target{"
"visibility:visible;" "visibility:visible"
"}" "}"
".lap:target .overlap{" ".lap:target .overlap{"
"opacity:0.7;" "opacity:0.7;"
"transition:0.3s;" "transition:0.3s"
"}" "}"
".lap:target .modal_button{" ".lap:target .modal_button{"
"opacity:1;" "opacity:1;"
"transition:0.3s;" "transition:0.3s"
"}" "}"
".overlap{" ".overlap{"
"top:0;" "top:0;"
@ -77,7 +77,7 @@ const char AutoConnect::_CSS_BASE[] PROGMEM = {
"position:fixed;" "position:fixed;"
"opacity:0;" "opacity:0;"
"background:#000;" "background:#000;"
"z-index:1000;" "z-index:1000"
"}" "}"
".modal_button{" ".modal_button{"
"border-radius:13px;" "border-radius:13px;"
@ -94,7 +94,7 @@ const char AutoConnect::_CSS_BASE[] PROGMEM = {
"width:20%;" "width:20%;"
"position:fixed;" "position:fixed;"
"opacity:0;" "opacity:0;"
"z-index:1001;" "z-index:1001"
"}" "}"
}; };
@ -103,28 +103,32 @@ const char AutoConnect::_CSS_UL[] PROGMEM = {
"ul.noorder{" "ul.noorder{"
"padding:0;" "padding:0;"
"list-style:none;" "list-style:none;"
"display:table"
"}"
"ul.noorder li{"
"display:table-row"
"}" "}"
"ul.noorder>*>label{" "ul.noorder>*>label{"
"display:inline-block;" "display:table-cell;"
"width:auto;" "width:auto;"
"margin-right:10px;" "margin-right:10px;"
"text-align:right;" "text-align:right;"
"padding:10px 0.5em;" "padding:10px 0.5em"
"}" "}"
"ul.noorder>input[type=\"checkbox\"]{" "ul.noorder>input[type=\"checkbox\"]{"
"-moz-appearance:checkbox;" "-moz-appearance:checkbox;"
"-webkit-appearance:checkbox;" "-webkit-appearance:checkbox"
"}" "}"
"ul.noorder>input[type=\"radio\"]{" "ul.noorder>input[type=\"radio\"]{"
"margin-right:0.5em;" "margin-right:0.5em;"
"-moz-appearance:radio;" "-moz-appearance:radio;"
"-webkit-appearance:radio;" "-webkit-appearance:radio"
"}" "}"
"ul.noorder>input[type=\"text\"]{" "ul.noorder>input[type=\"text\"]{"
"width:auto;" "width:auto"
"}" "}"
"ul.noorder>input[type=\"text\"]:invalid{" "ul.noorder>input[type=\"text\"]:invalid{"
"background:#fce4d6;" "background:#fce4d6"
"}" "}"
}; };
@ -136,7 +140,7 @@ const char AutoConnect::_CSS_ICON_LOCK[] PROGMEM = {
"height:22px;" "height:22px;"
"margin-top:14px;" "margin-top:14px;"
"float:right;" "float:right;"
"background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB1ElEQVRIibWVu0scURTGf3d2drBQFAWbbRQVCwuVLIZdi2gnWIiF/4GtKyuJGAJh8mgTcU0T8T8ICC6kiIVu44gvtFEQQWwsbExQJGHXmZtiZsOyzCN3Vz+4cDjfvec7j7l3QAF95onRZ54YKmdE1IbnS0c9mnAyAjkBxDy3LRHrjtRyu7OD52HntTAyvbw/HxP2hkCearrRb2WSCSuTTGi60S+QpzFhbwznDl/VVMHw0sF7hEjFbW2qkB38lfp8nNDipWcATil+uDM3cDWyeNRSijnfkHJnezb5Vkkgvbg3IOXD2e1ts93S+icnkZOAVaalZK3YQMa4L+pC6L1WduhYSeCf0PLBdxzOjZ93Lwvm6APAiLmlF1ubPiHotmaS41ExQjH0ZbfNM1NAFpgD0lVcICIrANqAVaAd+AFIYAy4BqaBG+Wsq5AH3vgk8xpYrzf4KLAZwhe8PYEIvQe4vc6H8Hnc2dQs0AFchvAXQGdEDF8s4A5TZS34BQqqQNaS1WMI3KD4WUbNoBJfce9CO7BSr4BfBe8A21vmUwh0VdjdTyHwscL+UK+AHxoD7FDoAX6/Cnpxn4ay/egCjcCL/w1chkqLakLQ/6ABhT57uAd+Vzv/Ara3iY6fK4WxAAAAAElFTkSuQmCC) no-repeat;" "background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB1ElEQVRIibWVu0scURTGf3d2drBQFAWbbRQVCwuVLIZdi2gnWIiF/4GtKyuJGAJh8mgTcU0T8T8ICC6kiIVu44gvtFEQQWwsbExQJGHXmZtiZsOyzCN3Vz+4cDjfvec7j7l3QAF95onRZ54YKmdE1IbnS0c9mnAyAjkBxDy3LRHrjtRyu7OD52HntTAyvbw/HxP2hkCearrRb2WSCSuTTGi60S+QpzFhbwznDl/VVMHw0sF7hEjFbW2qkB38lfp8nNDipWcATil+uDM3cDWyeNRSijnfkHJnezb5Vkkgvbg3IOXD2e1ts93S+icnkZOAVaalZK3YQMa4L+pC6L1WduhYSeCf0PLBdxzOjZ93Lwvm6APAiLmlF1ubPiHotmaS41ExQjH0ZbfNM1NAFpgD0lVcICIrANqAVaAd+AFIYAy4BqaBG+Wsq5AH3vgk8xpYrzf4KLAZwhe8PYEIvQe4vc6H8Hnc2dQs0AFchvAXQGdEDF8s4A5TZS34BQqqQNaS1WMI3KD4WUbNoBJfce9CO7BSr4BfBe8A21vmUwh0VdjdTyHwscL+UK+AHxoD7FDoAX6/Cnpxn4ay/egCjcCL/w1chkqLakLQ/6ABhT57uAd+Vzv/Ara3iY6fK4WxAAAAAElFTkSuQmCC) no-repeat"
"}" "}"
}; };
@ -149,31 +153,31 @@ const char AutoConnect::_CSS_INPUT_BUTTON[] PROGMEM = {
"color:#fff;" "color:#fff;"
"border:1px solid;" "border:1px solid;"
"border-radius:2px;" "border-radius:2px;"
"margin-top:12px;" "margin-top:12px"
"}" "}"
"input[type=\"button\"],button[type=\"button\"]{" "input[type=\"button\"],button[type=\"button\"]{"
"background-color:#1b5e20;" "background-color:#1b5e20;"
"border-color:#1b5e20;" "border-color:#1b5e20;"
"width:15em;" "width:15em"
"}" "}"
".aux-page input[type=\"button\"],button[type=\"button\"]{" ".aux-page input[type=\"button\"],button[type=\"button\"]{"
"font-weight:normal;" "font-weight:normal;"
"padding:8px 14px;" "padding:8px 14px;"
"margin:12px;" "margin:12px;"
"width:auto;" "width:auto"
"}" "}"
"input#sb[type=\"submit\"]{" "input#sb[type=\"submit\"]{"
"width:15em;" "width:15em"
"}" "}"
"input[type=\"submit\"],button[type=\"submit\"]{" "input[type=\"submit\"],button[type=\"submit\"]{"
"padding:8px 30px;" "padding:8px 30px;"
"background-color:#006064;" "background-color:#006064;"
"border-color:#006064;" "border-color:#006064"
"}" "}"
"input[type=\"button\"],input[type=\"submit\"],button[type=\"submit\"]:focus," "input[type=\"button\"],input[type=\"submit\"],button[type=\"submit\"]:focus,"
"input[type=\"button\"],input[type=\"submit\"],button[type=\"submit\"]:active{" "input[type=\"button\"],input[type=\"submit\"],button[type=\"submit\"]:active{"
"outline:none;" "outline:none;"
"text-decoration:none;" "text-decoration:none"
"}" "}"
}; };
@ -185,7 +189,7 @@ const char AutoConnect::_CSS_INPUT_TEXT[] PROGMEM = {
"border-radius:2px;" "border-radius:2px;"
"color:#444;" "color:#444;"
"margin:8px 0 8px 0;" "margin:8px 0 8px 0;"
"padding:10px;" "padding:10px"
"}" "}"
"input[type=\"text\"],input[type=\"password\"]{" "input[type=\"text\"],input[type=\"password\"]{"
"font-weight:300;" "font-weight:300;"
@ -194,39 +198,39 @@ const char AutoConnect::_CSS_INPUT_TEXT[] PROGMEM = {
"-moz-transition:all 0.20s ease-in;" "-moz-transition:all 0.20s ease-in;"
"-o-transition:all 0.20s ease-in;" "-o-transition:all 0.20s ease-in;"
"-ms-transition:all 0.20s ease-in;" "-ms-transition:all 0.20s ease-in;"
"transition:all 0.20s ease-in;" "transition:all 0.20s ease-in"
"}" "}"
"input[type=\"text\"]:focus,input[type=\"password\"]:focus{" "input[type=\"text\"]:focus,input[type=\"password\"]:focus{"
"outline:none;" "outline:none;"
"border-color:#5C9DED;" "border-color:#5C9DED;"
"box-shadow:0 0 3px #4B8CDC;" "box-shadow:0 0 3px #4B8CDC"
"}" "}"
"input.error, input.error:focus{" "input.error, input.error:focus{"
"border-color:#ED5564;" "border-color:#ED5564;"
"color:#D9434E;" "color:#D9434E;"
"box-shadow:0 0 3px #D9434E;" "box-shadow:0 0 3px #D9434E"
"}" "}"
"input:disabled{" "input:disabled{"
"opacity:0.6;" "opacity:0.6;"
"background-color:#f7f7f7;" "background-color:#f7f7f7"
"}" "}"
"input:disabled:hover{" "input:disabled:hover{"
"cursor:not-allowed;" "cursor:not-allowed"
"}" "}"
"input.error::-webkit-input-placeholder{" "input.error::-webkit-input-placeholder{"
"color:#D9434E;" "color:#D9434E"
"}" "}"
"input.error:-moz-placeholder{" "input.error:-moz-placeholder{"
"color:#D9434E;" "color:#D9434E"
"}" "}"
"input.error::-moz-placeholder{" "input.error::-moz-placeholder{"
"color:#D9434E;" "color:#D9434E"
"}" "}"
"input.error:-ms-input-placeholder{" "input.error:-ms-input-placeholder{"
"color:#D9434E;" "color:#D9434E"
"}" "}"
".aux-page label{" ".aux-page label{"
"padding:10px 0.5em;" "padding:10px 0.5em"
"}" "}"
}; };
@ -238,49 +242,49 @@ const char AutoConnect::_CSS_TABLE[] PROGMEM = {
"border:1px solid #ddd;" "border:1px solid #ddd;"
"color:#444;" "color:#444;"
"background-color:#fff;" "background-color:#fff;"
"margin-bottom:20px;" "margin-bottom:20px"
"}" "}"
"table.info," "table.info,"
"table.info>tfoot," "table.info>tfoot,"
"table.info>thead{" "table.info>thead{"
"width:100%;" "width:100%;"
"border-color:#5C9DED;" "border-color:#5C9DED"
"}" "}"
"table.info>thead{" "table.info>thead{"
"background-color:#5C9DED;" "background-color:#5C9DED"
"}" "}"
"table.info>thead>tr>th{" "table.info>thead>tr>th{"
"color:#fff;" "color:#fff"
"}" "}"
"td," "td,"
"th{" "th{"
"padding:10px 22px;" "padding:10px 22px"
"}" "}"
"thead{" "thead{"
"background-color:#f3f3f3;" "background-color:#f3f3f3;"
"border-bottom:1px solid #ddd;" "border-bottom:1px solid #ddd"
"}" "}"
"thead>tr>th{" "thead>tr>th{"
"font-weight:400;" "font-weight:400;"
"text-align:left;" "text-align:left"
"}" "}"
"tfoot{" "tfoot{"
"border-top:1px solid #ddd;" "border-top:1px solid #ddd"
"}" "}"
"tbody," "tbody,"
"tbody>tr:nth-child(odd){" "tbody>tr:nth-child(odd){"
"background-color:#fff;" "background-color:#fff"
"}" "}"
"tbody>tr>td," "tbody>tr>td,"
"tfoot>tr>td{" "tfoot>tr>td{"
"font-weight:300;" "font-weight:300;"
"font-size:.88em;" "font-size:.88em"
"}" "}"
"tbody>tr:nth-child(even){" "tbody>tr:nth-child(even){"
"background-color:#f7f7f7;" "background-color:#f7f7f7"
"}" "}"
"table.info tbody>tr:nth-child(even){" "table.info tbody>tr:nth-child(even){"
"background-color:#EFF5FD;" "background-color:#EFF5FD"
"}" "}"
}; };
@ -290,7 +294,7 @@ const char AutoConnect::_CSS_SPINNER[] PROGMEM = {
"width:40px;" "width:40px;"
"height:40px;" "height:40px;"
"position:relative;" "position:relative;"
"margin:100px auto;" "margin:100px auto"
"}" "}"
".double-bounce1, .double-bounce2{" ".double-bounce1, .double-bounce2{"
"width:100%;" "width:100%;"
@ -302,11 +306,11 @@ const char AutoConnect::_CSS_SPINNER[] PROGMEM = {
"top:0;" "top:0;"
"left:0;" "left:0;"
"-webkit-animation:sk-bounce 2.0s infinite ease-in-out;" "-webkit-animation:sk-bounce 2.0s infinite ease-in-out;"
"animation:sk-bounce 2.0s infinite ease-in-out;" "animation:sk-bounce 2.0s infinite ease-in-out"
"}" "}"
".double-bounce2{" ".double-bounce2{"
"-webkit-animation-delay:-1.0s;" "-webkit-animation-delay:-1.0s;"
"animation-delay:-1.0s;" "animation-delay:-1.0s"
"}" "}"
"@-webkit-keyframes sk-bounce{" "@-webkit-keyframes sk-bounce{"
"0%, 100%{-webkit-transform:scale(0.0)}" "0%, 100%{-webkit-transform:scale(0.0)}"
@ -332,7 +336,7 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"top:0;" "top:0;"
"left:0;" "left:0;"
"z-index:1000;" "z-index:1000;"
"box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);" "box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)"
"}" "}"
".luxbar-burger span," ".luxbar-burger span,"
".luxbar-burger span::before," ".luxbar-burger span::before,"
@ -340,91 +344,91 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"display:block;" "display:block;"
"height:2px;" "height:2px;"
"width:26px;" "width:26px;"
"transition:0.6s ease;" "transition:0.6s ease"
"}" "}"
".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span{" ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span{"
"background-color:transparent;" "background-color:transparent"
"}" "}"
".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::before," ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::before,"
".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::after{" ".luxbar-checkbox:checked~.luxbar-menu li .luxbar-burger span::after{"
"margin-top:0;" "margin-top:0"
"}" "}"
".luxbar-header{" ".luxbar-header{"
"display:flex;" "display:flex;"
"flex-direction:row;" "flex-direction:row;"
"justify-content:space-between;" "justify-content:space-between;"
"align-items:center;" "align-items:center;"
"height:58px;" "height:58px"
"}" "}"
".luxbar-menu-right .luxbar-burger{" ".luxbar-menu-right .luxbar-burger{"
"margin-left:auto;" "margin-left:auto"
"}" "}"
".luxbar-brand{" ".luxbar-brand{"
"font-size:1.6em;" "font-size:1.6em;"
"padding:18px 24px 18px 24px;" "padding:18px 24px 18px 24px"
"}" "}"
".luxbar-menu{" ".luxbar-menu{"
"min-height:58px;" "min-height:58px;"
"transition:0.6s ease;" "transition:0.6s ease;"
"width:100%;" "width:100%"
"}" "}"
".luxbar-navigation{" ".luxbar-navigation{"
"display:flex;" "display:flex;"
"flex-direction:column;" "flex-direction:column;"
"list-style:none;" "list-style:none;"
"padding-left:0;" "padding-left:0;"
"margin:0;" "margin:0"
"}" "}"
".luxbar-menu a," ".luxbar-menu a,"
".luxbar-item a{" ".luxbar-item a{"
"text-decoration:none;" "text-decoration:none;"
"color:inherit;" "color:inherit;"
"cursor:pointer;" "cursor:pointer"
"}" "}"
".luxbar-item{" ".luxbar-item{"
"height:58px;" "height:58px"
"}" "}"
".luxbar-item a{" ".luxbar-item a{"
"padding:18px 24px 18px 24px;" "padding:18px 24px 18px 24px;"
"display:block;" "display:block"
"}" "}"
".luxbar-burger{" ".luxbar-burger{"
"padding:18px 24px 18px 24px;" "padding:18px 24px 18px 24px;"
"position:relative;" "position:relative;"
"cursor:pointer;" "cursor:pointer"
"}" "}"
".luxbar-burger span::before," ".luxbar-burger span::before,"
".luxbar-burger span::after{" ".luxbar-burger span::after{"
"content:'';" "content:'';"
"position:absolute;" "position:absolute"
"}" "}"
".luxbar-burger span::before{" ".luxbar-burger span::before{"
"margin-top:-8px;" "margin-top:-8px"
"}" "}"
".luxbar-burger span::after{" ".luxbar-burger span::after{"
"margin-top:8px;" "margin-top:8px"
"}" "}"
".luxbar-checkbox{" ".luxbar-checkbox{"
"display:none;" "display:none"
"}" "}"
".luxbar-checkbox:not(:checked)~.luxbar-menu{" ".luxbar-checkbox:not(:checked)~.luxbar-menu{"
"overflow:hidden;" "overflow:hidden;"
"height:58px;" "height:58px"
"}" "}"
".luxbar-checkbox:checked~.luxbar-menu{" ".luxbar-checkbox:checked~.luxbar-menu{"
"transition:height 0.6s ease;" "transition:height 0.6s ease;"
"height:100vh;" "height:100vh;"
"overflow:auto;" "overflow:auto"
"}" "}"
".dropdown{" ".dropdown{"
"position:relative;" "position:relative;"
"height:auto;" "height:auto;"
"min-height:58px;" "min-height:58px"
"}" "}"
".dropdown:hover>ul{" ".dropdown:hover>ul{"
"position:relative;" "position:relative;"
"display:block;" "display:block;"
"min-width:100%;" "min-width:100%"
"}" "}"
".dropdown>a::after{" ".dropdown>a::after{"
"position:absolute;" "position:absolute;"
@ -433,23 +437,23 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"top:25px;" "top:25px;"
"border-width:5px 5px 0;" "border-width:5px 5px 0;"
"border-color:transparent;" "border-color:transparent;"
"border-style:solid;" "border-style:solid"
"}" "}"
".dropdown>ul{" ".dropdown>ul{"
"display:block;" "display:block;"
"overflow-x:hidden;" "overflow-x:hidden;"
"list-style:none;" "list-style:none;"
"padding:0;" "padding:0"
"}" "}"
".dropdown>ul .luxbar-item{" ".dropdown>ul .luxbar-item{"
"min-width:100%;" "min-width:100%;"
"height:29px;" "height:29px;"
"padding:5px 10px 5px 40px;" "padding:5px 10px 5px 40px"
"}" "}"
".dropdown>ul .luxbar-item a{" ".dropdown>ul .luxbar-item a{"
"min-height:29px;" "min-height:29px;"
"line-height:29px;" "line-height:29px;"
"padding:0;" "padding:0"
"}" "}"
"@media screen and (min-width:768px){" "@media screen and (min-width:768px){"
".luxbar-navigation{" ".luxbar-navigation{"
@ -491,10 +495,10 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = {
"}" "}"
"}" "}"
".luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::before{" ".luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::before{"
"transform:rotate(225deg);" "transform:rotate(225deg)"
"}" "}"
".luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::after{" ".luxbar-checkbox:checked+.luxbar-menu .luxbar-burger-doublespin span::after{"
"transform:rotate(-225deg);" "transform:rotate(-225deg)"
"}" "}"
".luxbar-menu-material," ".luxbar-menu-material,"
".luxbar-menu-material .dropdown ul{" ".luxbar-menu-material .dropdown ul{"
@ -686,7 +690,7 @@ const char AutoConnect::_PAGE_CONFIGNEW[] PROGMEM = {
"<label for=\"passphrase\">Passphrase</label>" "<label for=\"passphrase\">Passphrase</label>"
"<input id=\"passphrase\" type=\"password\" name=\"" AUTOCONNECT_PARAMID_PASS "\" placeholder=\"Passphrase\">" "<input id=\"passphrase\" type=\"password\" name=\"" AUTOCONNECT_PARAMID_PASS "\" placeholder=\"Passphrase\">"
"</li>" "</li>"
"<br><li><input type=\"submit\" value=\"apply\"></li>" "<br><li><input type=\"submit\" value=\"Apply\"></li>"
"</ul>" "</ul>"
"</form>" "</form>"
"</div>" "</div>"

Write Preview
Loading…
Cancel
Save