Fixed the layout collapse of the input box

pull/83/head
Hieromon Ikasamo 6 years ago
parent da0bc5331f
commit 25395a0741
  1. 162
      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 = {
"<label for=\"passphrase\">Passphrase</label>"
"<input id=\"passphrase\" type=\"password\" name=\"" AUTOCONNECT_PARAMID_PASS "\" placeholder=\"Passphrase\">"
"</li>"
"<br><li><input type=\"submit\" value=\"apply\"></li>"
"<br><li><input type=\"submit\" value=\"Apply\"></li>"
"</ul>"
"</form>"
"</div>"

Loading…
Cancel
Save