PurpleI2P
/
regi2p
mirror of https://github.com/PurpleI2P/regi2p.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

Signed-off-by: r4sas <r4sas@i2pmail.org>
master
R4SAS 2 years ago
parent
4777b23615
commit
506adfa0ff
Signed by: r4sas
GPG Key ID: 66F6C87B98EBCFE2
1 changed files with 120 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 125
      templates/_page.twig

125
templates/_page.twig
Unescape View File

@ -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_">

Write Preview
Loading…
Cancel
Save