From 25395a074111885cb934014a317ec7a560a02747 Mon Sep 17 00:00:00 2001 From: Hieromon Ikasamo Date: Fri, 24 May 2019 11:43:16 +0900 Subject: [PATCH] Fixed the layout collapse of the input box --- src/AutoConnectPage.cpp | 162 ++++++++++++++++++++-------------------- 1 file changed, 83 insertions(+), 79 deletions(-) diff --git a/src/AutoConnectPage.cpp b/src/AutoConnectPage.cpp index b1bce60..167a4a4 100644 --- a/src/AutoConnectPage.cpp +++ b/src/AutoConnectPage.cpp @@ -29,45 +29,45 @@ const char AutoConnect::_CSS_BASE[] PROGMEM = { "-ms-text-size-adjust:100%;" "-webkit-text-size-adjust:100%;" "-moz-osx-font-smoothing:grayscale;" - "-webkit-font-smoothing:antialiased;" + "-webkit-font-smoothing:antialiased" "}" "body{" "margin:0;" - "padding:0;" + "padding:0" "}" ".base-panel{" - "margin:0 22px 0 22px;" + "margin:0 22px 0 22px" "}" ".base-panel>*>label{" "display:inline-block;" "width:3.0em;" - "text-align:right;" + "text-align:right" "}" ".base-panel>*>label.slist{" "width:auto;" "font-size:0.9em;" "margin-left:10px;" - "text-align:left;" + "text-align:left" "}" "input{" "-moz-appearance:none;" "-webkit-appearance:none;" "font-size:0.9em;" - "margin:8px 0 auto;" + "margin:8px 0 auto" "}" ".lap{" - "visibility:collapse;" + "visibility:collapse" "}" ".lap:target{" - "visibility:visible;" + "visibility:visible" "}" ".lap:target .overlap{" "opacity:0.7;" - "transition:0.3s;" + "transition:0.3s" "}" ".lap:target .modal_button{" "opacity:1;" - "transition:0.3s;" + "transition:0.3s" "}" ".overlap{" "top:0;" @@ -77,7 +77,7 @@ const char AutoConnect::_CSS_BASE[] PROGMEM = { "position:fixed;" "opacity:0;" "background:#000;" - "z-index:1000;" + "z-index:1000" "}" ".modal_button{" "border-radius:13px;" @@ -94,7 +94,7 @@ const char AutoConnect::_CSS_BASE[] PROGMEM = { "width:20%;" "position:fixed;" "opacity:0;" - "z-index:1001;" + "z-index:1001" "}" }; @@ -103,28 +103,32 @@ const char AutoConnect::_CSS_UL[] PROGMEM = { "ul.noorder{" "padding:0;" "list-style:none;" + "display:table" + "}" + "ul.noorder li{" + "display:table-row" "}" "ul.noorder>*>label{" - "display:inline-block;" + "display:table-cell;" "width:auto;" "margin-right:10px;" "text-align:right;" - "padding:10px 0.5em;" + "padding:10px 0.5em" "}" "ul.noorder>input[type=\"checkbox\"]{" "-moz-appearance:checkbox;" - "-webkit-appearance:checkbox;" + "-webkit-appearance:checkbox" "}" "ul.noorder>input[type=\"radio\"]{" "margin-right:0.5em;" "-moz-appearance:radio;" - "-webkit-appearance:radio;" + "-webkit-appearance:radio" "}" "ul.noorder>input[type=\"text\"]{" - "width:auto;" + "width:auto" "}" "ul.noorder>input[type=\"text\"]:invalid{" - "background:#fce4d6;" + "background:#fce4d6" "}" }; @@ -136,7 +140,7 @@ const char AutoConnect::_CSS_ICON_LOCK[] PROGMEM = { "height:22px;" "margin-top:14px;" "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;" "border:1px solid;" "border-radius:2px;" - "margin-top:12px;" + "margin-top:12px" "}" "input[type=\"button\"],button[type=\"button\"]{" "background-color:#1b5e20;" "border-color:#1b5e20;" - "width:15em;" + "width:15em" "}" ".aux-page input[type=\"button\"],button[type=\"button\"]{" "font-weight:normal;" "padding:8px 14px;" "margin:12px;" - "width:auto;" + "width:auto" "}" "input#sb[type=\"submit\"]{" - "width:15em;" + "width:15em" "}" "input[type=\"submit\"],button[type=\"submit\"]{" "padding:8px 30px;" "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\"]:active{" "outline:none;" - "text-decoration:none;" + "text-decoration:none" "}" }; @@ -185,7 +189,7 @@ const char AutoConnect::_CSS_INPUT_TEXT[] PROGMEM = { "border-radius:2px;" "color:#444;" "margin:8px 0 8px 0;" - "padding:10px;" + "padding:10px" "}" "input[type=\"text\"],input[type=\"password\"]{" "font-weight:300;" @@ -194,39 +198,39 @@ const char AutoConnect::_CSS_INPUT_TEXT[] PROGMEM = { "-moz-transition:all 0.20s ease-in;" "-o-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{" "outline:none;" "border-color:#5C9DED;" - "box-shadow:0 0 3px #4B8CDC;" + "box-shadow:0 0 3px #4B8CDC" "}" "input.error, input.error:focus{" "border-color:#ED5564;" "color:#D9434E;" - "box-shadow:0 0 3px #D9434E;" + "box-shadow:0 0 3px #D9434E" "}" "input:disabled{" "opacity:0.6;" - "background-color:#f7f7f7;" + "background-color:#f7f7f7" "}" "input:disabled:hover{" - "cursor:not-allowed;" + "cursor:not-allowed" "}" "input.error::-webkit-input-placeholder{" - "color:#D9434E;" + "color:#D9434E" "}" "input.error:-moz-placeholder{" - "color:#D9434E;" + "color:#D9434E" "}" "input.error::-moz-placeholder{" - "color:#D9434E;" + "color:#D9434E" "}" "input.error:-ms-input-placeholder{" - "color:#D9434E;" + "color:#D9434E" "}" ".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;" "color:#444;" "background-color:#fff;" - "margin-bottom:20px;" + "margin-bottom:20px" "}" "table.info," "table.info>tfoot," "table.info>thead{" "width:100%;" - "border-color:#5C9DED;" + "border-color:#5C9DED" "}" "table.info>thead{" - "background-color:#5C9DED;" + "background-color:#5C9DED" "}" "table.info>thead>tr>th{" - "color:#fff;" + "color:#fff" "}" "td," "th{" - "padding:10px 22px;" + "padding:10px 22px" "}" "thead{" "background-color:#f3f3f3;" - "border-bottom:1px solid #ddd;" + "border-bottom:1px solid #ddd" "}" "thead>tr>th{" "font-weight:400;" - "text-align:left;" + "text-align:left" "}" "tfoot{" - "border-top:1px solid #ddd;" + "border-top:1px solid #ddd" "}" "tbody," "tbody>tr:nth-child(odd){" - "background-color:#fff;" + "background-color:#fff" "}" "tbody>tr>td," "tfoot>tr>td{" "font-weight:300;" - "font-size:.88em;" + "font-size:.88em" "}" "tbody>tr:nth-child(even){" - "background-color:#f7f7f7;" + "background-color:#f7f7f7" "}" "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;" "height:40px;" "position:relative;" - "margin:100px auto;" + "margin:100px auto" "}" ".double-bounce1, .double-bounce2{" "width:100%;" @@ -302,11 +306,11 @@ const char AutoConnect::_CSS_SPINNER[] PROGMEM = { "top:0;" "left:0;" "-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{" "-webkit-animation-delay:-1.0s;" - "animation-delay:-1.0s;" + "animation-delay:-1.0s" "}" "@-webkit-keyframes sk-bounce{" "0%, 100%{-webkit-transform:scale(0.0)}" @@ -332,7 +336,7 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = { "top:0;" "left:0;" "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::before," @@ -340,91 +344,91 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = { "display:block;" "height:2px;" "width:26px;" - "transition:0.6s ease;" + "transition:0.6s ease" "}" ".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::after{" - "margin-top:0;" + "margin-top:0" "}" ".luxbar-header{" "display:flex;" "flex-direction:row;" "justify-content:space-between;" "align-items:center;" - "height:58px;" + "height:58px" "}" ".luxbar-menu-right .luxbar-burger{" - "margin-left:auto;" + "margin-left:auto" "}" ".luxbar-brand{" "font-size:1.6em;" - "padding:18px 24px 18px 24px;" + "padding:18px 24px 18px 24px" "}" ".luxbar-menu{" "min-height:58px;" "transition:0.6s ease;" - "width:100%;" + "width:100%" "}" ".luxbar-navigation{" "display:flex;" "flex-direction:column;" "list-style:none;" "padding-left:0;" - "margin:0;" + "margin:0" "}" ".luxbar-menu a," ".luxbar-item a{" "text-decoration:none;" "color:inherit;" - "cursor:pointer;" + "cursor:pointer" "}" ".luxbar-item{" - "height:58px;" + "height:58px" "}" ".luxbar-item a{" "padding:18px 24px 18px 24px;" - "display:block;" + "display:block" "}" ".luxbar-burger{" "padding:18px 24px 18px 24px;" "position:relative;" - "cursor:pointer;" + "cursor:pointer" "}" ".luxbar-burger span::before," ".luxbar-burger span::after{" "content:'';" - "position:absolute;" + "position:absolute" "}" ".luxbar-burger span::before{" - "margin-top:-8px;" + "margin-top:-8px" "}" ".luxbar-burger span::after{" - "margin-top:8px;" + "margin-top:8px" "}" ".luxbar-checkbox{" - "display:none;" + "display:none" "}" ".luxbar-checkbox:not(:checked)~.luxbar-menu{" "overflow:hidden;" - "height:58px;" + "height:58px" "}" ".luxbar-checkbox:checked~.luxbar-menu{" "transition:height 0.6s ease;" "height:100vh;" - "overflow:auto;" + "overflow:auto" "}" ".dropdown{" "position:relative;" "height:auto;" - "min-height:58px;" + "min-height:58px" "}" ".dropdown:hover>ul{" "position:relative;" "display:block;" - "min-width:100%;" + "min-width:100%" "}" ".dropdown>a::after{" "position:absolute;" @@ -433,23 +437,23 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = { "top:25px;" "border-width:5px 5px 0;" "border-color:transparent;" - "border-style:solid;" + "border-style:solid" "}" ".dropdown>ul{" "display:block;" "overflow-x:hidden;" "list-style:none;" - "padding:0;" + "padding:0" "}" ".dropdown>ul .luxbar-item{" "min-width:100%;" "height:29px;" - "padding:5px 10px 5px 40px;" + "padding:5px 10px 5px 40px" "}" ".dropdown>ul .luxbar-item a{" "min-height:29px;" "line-height:29px;" - "padding:0;" + "padding:0" "}" "@media screen and (min-width:768px){" ".luxbar-navigation{" @@ -491,10 +495,10 @@ const char AutoConnect::_CSS_LUXBAR[] PROGMEM = { "}" "}" ".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{" - "transform:rotate(-225deg);" + "transform:rotate(-225deg)" "}" ".luxbar-menu-material," ".luxbar-menu-material .dropdown ul{" @@ -686,7 +690,7 @@ const char AutoConnect::_PAGE_CONFIGNEW[] PROGMEM = { "" "" "" - "
    • " + "
    • " "" "" ""