Browse Source

integrate minified css to page template, add check in search field for mobile

Signed-off-by: r4sas <r4sas@i2pmail.org>
master
R4SAS 9 months ago
parent
commit
506adfa0ff
Signed by: r4sas
GPG Key ID: 66F6C87B98EBCFE2
  1. 125
      templates/_page.twig

125
templates/_page.twig

@ -4,14 +4,129 @@ @@ -4,14 +4,129 @@
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %} - Registry</title>
<link rel="preload" href="/css/style.css" as="style">
<link rel="preload" href="/img/logo.svg" as="image">
<style>
@media screen and (max-width: 920px) {
.main-menu {transform: translateX(-100%);}
body{margin:0 auto;background-color:#e6e6e6}
main{flex-grow:1;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;padding:5px 0}
.container_100vh{flex-grow:1;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:center}
.container_main{font-size:16px}
.container_main ul{margin-bottom:20px}
.container_main li{list-style-position:inside;margin-bottom:5px}
.container_main li ul{padding-left:22px;margin-bottom:unset;margin-top:5px}
.container_main b{font-size:18px;margin-bottom:5px}
.container_main a{color:#203070;transition:0.3s color linear}
.container_main a:hover{color:#4477ff}
*{box-sizing:border-box;font-family:monospace}
button,input,li,ul{padding:0;margin:0;border:0 solid transparent}
svg{max-width:100%}
html{background-color:#e6e6e6}
body{background-color:#dadada;max-width:1240px;margin:0 auto;min-height:100vh;display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start}
abbr{cursor:help;border-bottom:1px dotted #000;text-decoration:none}
.container{width:100%;padding:0 20px}
.header{position:sticky;top:0;left:0;width:100%}
.header__top{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;padding:10px 20px;background-color:#c1c1c1}
.header__logo{display:block;flex-basis:220px}
.logo{font-size:0}
.logo__link{display:inline-block;font-size:0;width:100%}
.search{display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:space-between}
.text-input{padding:0 10px;border:1px solid #e6e6e6;background-color:#e6e6e6;transition:0.3s background-color linear, 0.3s border linear, 0.3s box-shadow linear;outline:none}
.search__text-input{width:260px;margin-right:5px}
.text-input:hover{background-color:#fff}
.text-input:focus{border:1px solid #0054a6;background-color:#fff;box-shadow:0 0 6px 1px rgba(0, 84, 166, .6)}
.text-input::placeholder{font-size:16px;font-weight:bold;color:#777}
.search__btn{height:100%;padding:5px 10px;cursor:pointer;background-color:#dadada;transition:0.3s background-color linear, 0.3s box-shadow linear}
.search__btn img{width:20px}
.search__btn svg path{fill:#333;transition:0.3s fill linear}
.search__btn:hover{background-color:#fff;box-shadow:0 0 6px 1px rgba(0, 84, 166, .6)}
.search__btn:hover svg path{fill:#0054a6}
.main-menu__list{display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:space-between;background:#c1c1c1}
.main-menu__item{list-style:none;font-size:0;flex-grow:1;margin-right:5px}
.main-menu__item:last-child{margin-right:0}
.main-menu__link{display:inline-block;width:100%;font-size:22px;font-size:22px;font-weight:400;text-transform:uppercase;text-align:center;padding:4px 0;cursor:pointer;background-color:#e6e6e6;border:1px solid #e6e6e6;box-shadow:0 4px 6px 2px rgba(0, 0, 0, .5);text-decoration:none;color:#444;transition:0.3s background-color linear, 0.3s border linear, 0.3s color linear, 0.3s box-shadow linear}
.main-menu__link:hover{background-color:#fff;border:1px solid #0054a6;color:#0054a6;box-shadow:0 0 12px 2px rgba(0, 84, 166, .8)}
.pagination__link:hover{background-color:#fff;border:1px solid #808080;color:#0054a6}
.header__mobile-logo{display:none}
.header__mobile-search{display:none}
.footer{margin-top:auto;padding:25px 0;text-align:center;font-size:18px;color:#000;background-color:#a7a7a7}
.adder,.jumper{font-size:18px;color:#000000}
.title{font-size:24px;text-align:center;text-transform:uppercase;font-weight:bold}
.line{margin-bottom:10px}
.line:last-child{margin-bottom:0}
.crazy-base64-span,.table__cell_long-ass{word-break:break-all}
.form__field{margin-bottom:20px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:flex-start}
.form__field:last-child{margin-bottom:0}
.adder__text-input,.jumper__text-input,.search-page__text-input{flex-grow:1;padding:5px 10px;margin-left:15px}
.btn{height:100%;padding:5px 10px;cursor:pointer;background-color:#dadada;transition:0.3s background-color linear, 0.3s color linear, 0.3s border linear, 0.3s box-shadow linear}
.adder__btn,.jumper__btn,.search-page__btn{display:block;margin-left:auto;margin-right:auto;background-color:#fff;text-transform:uppercase;border:1px solid #0054a6;color:#0054a6;font-size:20px;font-weight:bold}
.adder__btn:hover,.jumper__btn:hover,.search-page__btn:hover{background-color:#0054a6;color:#ffffff;border:1px solid #fff;box-shadow:0 0 23px 13px rgba(255, 255, 255, 1)}
.pagination__item.active .pagination__link,.pagination__item.active .pagination__link:hover{background-color:#0054a6;color:#ffffff;box-shadow:0 0 0 0 transparent}
.table{font-size:18px;border-collapse:collapse;width:100%}
.table__head{font-weight:bold;text-transform:uppercase}
.table__head .table__row{background-color:transparent !important;color:#000 !important}
.table__row{margin-bottom:10px;background-color:#dadada;color:#000}
.table__row:nth-child(odd){background-color:#808080;color:#fff}
.table__row a{color:#203070;transition:0.3s color linear}
.table__row:nth-child(odd) a{color:#0054a6}
.table__row a:hover{color:#50a0ff}
.table__row:nth-child(odd) a:hover{color:#ddddff}
.table__cell{padding:8px}
.table__cell_center-bold{text-align:center;font-weight:bold}
.table__cell_date{white-space:nowrap;max-width:225px;text-align:center}
.table__cell_full-b32{user-select:all}
.pagination{margin-top:40px;display:flex;flex-flow:row nowrap;align-items:stretch;justify-content:center}
.pagination__item{list-style:none;width:40px;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;font-size:0;margin-right:5px}
.pagination__item:last-child{margin-right:0}
.pagination__link{text-decoration:none;text-transform:uppercase;line-height:1;width:100%;height:100%;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;padding:10px 0;cursor:pointer;background-color:#dadada;transition:0.3s background-color linear, 0.3s color linear, 0.3s border linear, 0.3s box-shadow linear;border:1px solid transparent;color:#0054a6;font-size:18px;font-weight:bold}
.pagination__link_arrow{font-size:0;position:relative}
.pagination__link_arrow::after{content:'';position:absolute;top:50%;left:50%;width:5px;height:5px}
.pagination__link_arrow_prev::after{transform:translate(-50%, -50%) rotate(-45deg);border-left:1px solid #0054a6;border-top:1px solid #0054a6}
.pagination__link_arrow_next::after{transform:translate(-50%, -50%) rotate(45deg);border-right:1px solid #0054a6;border-top:1px solid #0054a6}
.error-msg{text-align:center}
.error-msg svg{max-width:300px}
.hamburger{display:none}
.header-bottom__main-menu-switch{display:none}
.section-head{margin-bottom:40px}
.disclaimer{font-size:16px;margin-bottom:15px}
.disclaimer:last-child{margin-bottom:30px}
@media screen and (max-width: 920px){
.container{padding:0 8px}
.header__logo{flex-basis:auto;margin-bottom:5px}
.logo svg{max-width:120px}
.header__search .search__text-input{max-width:unset;flex-grow:1;margin:0}
.header__top{display:none}
.header__bottom{padding:3px 5px;position:relative;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}
.header__bottom:before{content:"";z-index:0;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(190, 190, 190, .6);backdrop-filter: blur(1px);-webkit-backdrop-filter: blur(1px)}
.header__mobile-logo{display:block;margin-left:10px;margin-right:auto;width:100px;position:relative;z-index:1}
.header__mobile-logo .st2{}
.header__mobile-search{display:flex;margin-left:10px;position:relative;z-index:1}
.header__mobile-search .search__btn{padding:3px 5px}
.header__mobile-search svg{width:15px}
.header__mobile-search .search__text-input{width:140px}
.hamburger{display:block}
.hamburger__stripes{border-top:2px solid #333;border-bottom:2px solid #333;width:20px;height:14px;position:relative}
.hamburger__stripes:after{content:"";position:absolute;height:2px;width:100%;top:50%;left:0;transform:translateY(-50%);background-color:#333}
.main-menu{background-color:#fff;position:absolute;left:0;top:100%;height:calc(100vh - 32px);background-color:#e6e6e6;transform:translateX(-100%);transition:0.2s transform linear, 0.1s box-shadow linear;box-shadow:none}
.main-menu__list{flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;background:unset}
.main-menu__item{margin-right:0;padding:0 8px;min-width:30vw}
.main-menu__link{box-shadow:none;border-bottom:1px solid #aaa}
.header-bottom__main-menu-switch:checked ~ .main-menu{transform:translateX(0);box-shadow:0 0 12px 4px rgba(0, 0, 0, .5)}
.title{font-size:16px}
.table{font-size:14px}
.table__cell{padding:6px 4px;word-break:break-word;min-width:48px}
.text-input{padding:0 6px;font-size:16px}
.text-input::placeholder{font-size:14px}
.pagination__link{padding:3px 0;font-size:14px}
.adder__btn,.jumper__btn,.search-page__btn{font-size:16px}
.footer{font-size:12px}
}
@media screen and (max-width: 620px){
.main-menu__item{min-width:45vw}
table__cell_date{white-space:unset}
}
@media screen and (max-width: 530px){
.table__cell_full-b32{display:none}
}
</style>
<link rel="stylesheet" href="/css/style.css"/>
{% endblock %}
</head>
<body>
@ -85,7 +200,7 @@ @@ -85,7 +200,7 @@
</a>
</div>
<form action="/search" method="post" class="search header__mobile-search">
<input type="text" name="q" class="text-input search__text-input" maxlength="67" placeholder="Search address">
<input type="text" name="q" class="text-input search__text-input" minlength="3" maxlength="67" placeholder="Search address" required>
<button type="submit" class="search__btn">
<svg enable-background="new 0 0 32 32" id="search_svg" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="search_1_">

Loading…
Cancel
Save