Skip to content

Commit a5789b2

Browse files
RolandTiRolandTi
committed
Multiples fixes
- Search form works again on ios - Better alert boxes
1 parent ae12273 commit a5789b2

File tree

3 files changed

+98
-47
lines changed

3 files changed

+98
-47
lines changed

‎stack/_inc/page.header.html

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
<button type="submit" class="search-button" aria-label="{'Search'|t}"><svg aria-hidden="true" viewbox="0 0 21 21" width="21" height="21"><rect class="svg-fill-empty" width="21" height="21" /><circle class="svg-line" cx="8.88" cy="8.79" r="6.5" /><line class="svg-line" x1="13.46" y1="13.4" x2="18.73" y2="18.68" /></svg></button>
121121
</form>
122122
<button class="button_filters" aria-expanded="false">
123-
<svg width="21px" height="21px" viewBox="0 0 21 21"><rect width="21" height="21" class="svg-fill-empty" /><path class="svg-line-thin" d="M0.9,0.5c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.1-0.1,0.3,0,0.4l7,9.6V16c0,0.1,0.1,0.3,0.2,0.3l3.9,3.1c0.1,0.1,0.3,0.1,0.5,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-8.3l7-9.6c0.1-0.1,0.1-0.3,0-0.4c-0.1-0.1-0.2-0.2-0.4-0.2L0.9,0.5z"/></svg>
123+
<svg width="21px" height="21px" viewBox="0 0 21 21"><rect width="21" height="21" class="svg-fill-empty" /><path class="svg-fill" d="M0.9,0.5c-0.2,0-0.3,0.1-0.4,0.2c-0.1,0.1-0.1,0.3,0,0.4l7,9.6V16c0,0.1,0.1,0.3,0.2,0.3l3.9,3.1c0.1,0.1,0.3,0.1,0.5,0.1c0.1-0.1,0.2-0.2,0.2-0.4v-8.3l7-9.6c0.1-0.1,0.1-0.3,0-0.4c-0.1-0.1-0.2-0.2-0.4-0.2L0.9,0.5z"/></svg>
124124
</button>
125125
</div>
126126
<!-- SEARCH:END -->
@@ -151,7 +151,7 @@
151151
{if="$versionError"}
152152
{'Error'|t}: {$versionError}
153153
{/if}
154-
<span id="new-version-dismiss" class="pure-alert-close"><svg aria-hidden="true" width="21" height="21" viewbox="0 0 21 21"><circle class="svg-close" cx="10.5" cy="10.5" r="10"/><line class="svg-close" x1="6.5" y1="6.5" x2="14.5" y2="14.5"/><line class="svg-close" x1="14.5" y1="6.5" x2="6.5" y2="14.5"/></svg>
154+
<span id="new-version-dismiss" class="pure-alert-close"><svg aria-hidden="true" viewbox="0 0 25 25"><line class="svg-close" x1="19.5" y1="5.5" x2="5.5" y2="19.5"/><line class="svg-close" x1="5.5" y1="5.5" x2="19.5" y2="19.5"/></svg>
155155
</span>
156156
</div>
157157
{/if}
@@ -160,34 +160,30 @@
160160
<!-- ALERTE:PLUGINS -->
161161
<div class="pure-g new-version-message pure-alert pure-alert-error pure-alert-closable" id="shaarli-errors-alert">
162162
<div>{loop="plugin_errors"}<p>{$value}</p>{/loop}</div>
163-
<span class="pure-alert-close"><svg aria-hidden="true" width="21" height="21" viewbox="0 0 21 21"><circle class="svg-close" cx="10.5" cy="10.5" r="10"/><line class="svg-close" x1="6.5" y1="6.5" x2="14.5" y2="14.5"/><line class="svg-close" x1="14.5" y1="6.5" x2="6.5" y2="14.5"/></svg>
164-
</span>
163+
<span class="pure-alert-close"><svg aria-hidden="true" viewbox="0 0 25 25"><line class="svg-close" x1="19.5" y1="5.5" x2="5.5" y2="19.5"/><line class="svg-close" x1="5.5" y1="5.5" x2="19.5" y2="19.5"/></svg></span>
165164
</div>
166165
{/if}
167166

168167
{if="!empty($global_errors)"}
169168
<!-- ALERTE:GLOBAL -->
170169
<div class="pure-g header-alert-message pure-alert pure-alert-error pure-alert-closable" id="shaarli-errors-alert">
171170
{loop="$global_errors"}<p>{$value}</p>{/loop}
172-
<span class="pure-alert-close"><svg aria-hidden="true" width="21" height="21" viewbox="0 0 21 21"><circle class="svg-close" cx="10.5" cy="10.5" r="10"/><line class="svg-close" x1="6.5" y1="6.5" x2="14.5" y2="14.5"/><line class="svg-close" x1="14.5" y1="6.5" x2="6.5" y2="14.5"/></svg>
173-
</span>
171+
<span class="pure-alert-close"><svg aria-hidden="true" viewbox="0 0 25 25"><line class="svg-close" x1="19.5" y1="5.5" x2="5.5" y2="19.5"/><line class="svg-close" x1="5.5" y1="5.5" x2="19.5" y2="19.5"/></svg></span>
174172
</div>
175173
{/if}
176174

177175
{if="!empty($global_warnings)"}
178176
<!-- ALERTE:WARNING -->
179177
<div class="pure-g header-alert-message pure-alert pure-alert-warning pure-alert-closable" id="shaarli-warnings-alert">
180178
<div>{loop="global_warnings"}<p>{$value}</p>{/loop}</div>
181-
<span class="pure-alert-close"><svg aria-hidden="true" width="21" height="21" viewbox="0 0 21 21"><circle class="svg-close" cx="10.5" cy="10.5" r="10"/><line class="svg-close" x1="6.5" y1="6.5" x2="14.5" y2="14.5"/><line class="svg-close" x1="14.5" y1="6.5" x2="6.5" y2="14.5"/></svg>
182-
</span>
179+
<span class="pure-alert-close"><svg aria-hidden="true" viewbox="0 0 25 25"><line class="svg-close" x1="19.5" y1="5.5" x2="5.5" y2="19.5"/><line class="svg-close" x1="5.5" y1="5.5" x2="19.5" y2="19.5"/></svg></span>
183180
</div>
184181
{/if}
185182

186183
{if="!empty($global_successes)"}
187184
<!-- ALERTE:SUCCESSES ALERT -->
188185
<div class="pure-g header-alert-message new-version-message pure-alert pure-alert-success pure-alert-closable" id="shaarli-success-alert">
189186
{loop="$global_successes"}<p>{$value}</p>{/loop}
190-
<span class="pure-alert-close"><svg aria-hidden="true" width="21" height="21" viewbox="0 0 21 21"><circle class="svg-close" cx="10.5" cy="10.5" r="10"/><line class="svg-close" x1="6.5" y1="6.5" x2="14.5" y2="14.5"/><line class="svg-close" x1="14.5" y1="6.5" x2="6.5" y2="14.5"/></svg>
191-
</span>
187+
<span class="pure-alert-close"><svg aria-hidden="true" viewbox="0 0 25 25"><line class="svg-close" x1="19.5" y1="5.5" x2="5.5" y2="19.5"/><line class="svg-close" x1="5.5" y1="5.5" x2="19.5" y2="19.5"/></svg></span>
192188
</div>
193189
{/if}

‎stack/css/stack.css

Lines changed: 91 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--color06: #6C6C70;
2121
--color-alerte: #FF353B;
2222
--small-font: 1.2rem;
23+
--medium-font: 1.2rem;
2324
--small-medium-font: 1.5rem;
2425
--border-radius: 1rem;
2526
}
@@ -32,6 +33,7 @@
3233
:root {
3334
--small-font: 1.2rem;
3435
--small-medium-font: unset;
36+
--medium-font: 1.5rem;
3537
}
3638
}
3739

@@ -491,31 +493,63 @@ details summary {
491493
}
492494

493495
.alerte-rouge, .pure-alert-error {
494-
color: red;
495-
background-color: rgba(255, 0, 0, 0.1);
496-
padding: 1ch;
497-
border-radius: .5rem;
496+
color: white;
497+
background-color: var(--color-alerte);
498+
padding-left: 1ch;
499+
padding-right: 1ch;
500+
border-radius: var(--border-radius);
498501
}
499502

500503
.pure-alert-success, .pure-alert-warning {
501-
color: #00CD51;
504+
color: white;
505+
background-color: rgb(0, 205, 81);
502506
margin-top: var(--normal-margin);
503507
margin-bottom: var(--normal-margin);
504508
display: flex;
505509
align-items: center;
510+
justify-content: space-between;
506511
gap:1rem;
512+
padding-left: 1ch;
513+
padding-right: 1ch;
514+
border-radius: var(--border-radius);
515+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
507516

508517
}
509518

510519
#shaarli-errors-alert {
520+
margin-top: var(--normal-margin);
521+
margin-bottom: var(--normal-margin);
511522
display: flex;
523+
justify-content: space-between;
512524
align-items: center;
513525
align-content: center;
514526
gap:1rem;
527+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
528+
}
529+
530+
.no-padding .pure-alert {
531+
margin-left: var(--normal-margin);
532+
margin-right:var(--normal-margin) ;
515533
}
516534

517-
.pure-alert-close {
535+
.pure-alert-close svg{
518536
cursor: pointer;
537+
background-color: white;
538+
width: 25px;
539+
height: 25px;
540+
display: block;
541+
border-radius: 50%;
542+
}
543+
544+
.svg-close {
545+
fill: none;
546+
stroke: rgb(0, 205, 81);;
547+
stroke-width: 0.2rem;
548+
vector-effect: non-scaling-stroke;
549+
}
550+
551+
.pure-alert-error .svg-close {
552+
stroke: var(--color-alerte);
519553
}
520554

521555
#search-result-block {
@@ -590,8 +624,9 @@ details summary {
590624
}
591625

592626
.md_help {
593-
font-size: 1.2rem;
627+
font-size: var(--medium-font);
594628
padding-bottom: var(--normal-margin);
629+
margin-top: 1ch;
595630
}
596631

597632
.addlink-batch summary {
@@ -755,10 +790,12 @@ th {
755790
display: block;
756791
}
757792

758-
[type="url"], [type="text"], [type="password"], textarea {
793+
[type="url"], [type="text"], [type="password"], textarea, .toolbar-plugin [type="text"] {
759794
border: none;
760795
width: 100%;
761796
padding: 1ch;
797+
padding-top: .5rem;
798+
padding-bottom: .5rem;
762799
border-radius: var(--border-radius);
763800
margin-bottom: 1ch;
764801
color: var(--dark-main-color);
@@ -769,24 +806,40 @@ th {
769806
background-color: var(--background-color);
770807
}
771808

809+
@media (min-width:768px) {
810+
[type="url"], [type="text"], [type="password"], textarea, .toolbar-plugin [type="text"] {
811+
padding-top: .7rem;
812+
padding-bottom: .7rem;
813+
}
814+
815+
}
816+
772817
.tools-server section [type="text"], .tools-server section [type="text"]:hover, .tools-server section [type="text"]:focus {
773818

774819
}
775820

776-
.button, [type="submit"],.button-red {
821+
.button, [type="submit"],.button-red,.bigbutton {
822+
display: inline-block;
777823
background-color: var(--dark-main-color);
778824
border-radius: var(--border-radius);
779825
border: 1px solid var(--dark-main-color);
780826
color: var(--background-color);
781827
cursor: pointer;
782-
padding: 1ch;
828+
padding-top: .5rem;
829+
padding-bottom: .5rem;
783830
padding-left: 2ch;
784831
padding-right: 2ch;
785832
margin-bottom: var(--normal-margin);
786833
transition: background 100ms ease-in-out 0s,color 100ms ease-in-out 0s;
787834
text-decoration: none;
788835
}
789836

837+
@media (min-width:768px) {
838+
.button, [type="submit"],.button-red,.bigbutton {
839+
padding-top: 1ch;
840+
padding-bottom: 1ch; }
841+
}
842+
790843
.button:hover, [type="submit"]:hover {
791844
color: var(--dark-main-color);
792845
background-color: var(--background-color);
@@ -998,10 +1051,9 @@ select {
9981051

9991052
#search {
10001053
padding-top: .5rem;
1001-
padding-bottom: .5rem;
1054+
padding-bottom: 1rem;
10021055
padding-left: var(--normal-margin);
10031056
padding-right: var(--normal-margin);
1004-
margin-bottom: var(--normal-margin);
10051057
display: none;
10061058
flex-direction: row;
10071059
gap: 1rem;
@@ -1049,11 +1101,12 @@ form .awesomplete {
10491101
background-color: inherit;
10501102
padding-left: 0rem;
10511103
padding-right: 0;
1052-
display: none;
1053-
}
1104+
visibility: hidden;
1105+
position: absolute;
1106+
}
10541107

10551108
form [type="text"]::placeholder {
1056-
color: var(--color06);
1109+
color: rgba(0, 0, 0, 0.59);
10571110
}
10581111

10591112
input#tagfilter_value {
@@ -1116,23 +1169,6 @@ input#tagfilter_value {
11161169
vector-effect: non-scaling-stroke;
11171170
}
11181171

1119-
.svg-close {
1120-
fill: none;
1121-
stroke: var(--color06);
1122-
stroke-width: 1px;
1123-
stroke-linecap: round;
1124-
stroke-linejoin: round;
1125-
vector-effect: non-scaling-stroke;
1126-
}
1127-
1128-
#shaarli-success-alert .svg-close {
1129-
stroke: #00CD51;
1130-
}
1131-
1132-
#shaarli-errors-alert .svg-close {
1133-
stroke: red;
1134-
}
1135-
11361172
.expand-private .svg-line {
11371173
stroke: var(--color-alerte);
11381174
}
@@ -1259,6 +1295,8 @@ a:hover .svg-fill {
12591295
#linklist {
12601296
flex-grow: 1;
12611297
padding-bottom: .5rem;
1298+
margin-top: var(--normal-margin);
1299+
12621300
}
12631301

12641302
#linklist header {
@@ -1283,6 +1321,14 @@ a:hover .svg-fill {
12831321

12841322
.pin-icon {
12851323
margin-right: .2ch;
1324+
width: auto;
1325+
height: 1.2rem;
1326+
}
1327+
1328+
@media (min-width:768px) {
1329+
.pin-icon {
1330+
height: 1.5rem;
1331+
}
12861332
}
12871333

12881334
#linklist h2 a {
@@ -1320,6 +1366,7 @@ a:hover .svg-fill {
13201366
object-position: 50% 50%;
13211367
width: 48px;
13221368
height: 48px;
1369+
filter: brightness(95%);
13231370
}
13241371

13251372
#linklist figure {
@@ -1338,7 +1385,7 @@ a:hover .svg-fill {
13381385
}
13391386

13401387
.linklist-item {
1341-
border-bottom: .05rem solid var(--dark-main-color);
1388+
border-bottom: .05rem solid rgba(0, 0, 0, 0.1);
13421389
padding-right: 4rem;
13431390
padding-left: var(--normal-margin);
13441391
word-wrap: break-word;
@@ -1426,7 +1473,7 @@ a:hover .svg-fill {
14261473
flex-wrap: wrap;
14271474
background: none;
14281475
justify-content: center;
1429-
align-items: center;
1476+
align-items: end;
14301477
}
14311478

14321479
/* Animating + to X */
@@ -2014,16 +2061,18 @@ hr {
20142061
.toolbar-plugin {
20152062
display: grid;
20162063
grid-template-columns: 1fr auto;
2064+
align-items: start;
20172065
gap: 1rem;
20182066
flex-direction: row;
20192067
padding-left: var(--normal-margin);
20202068
padding-right: var(--normal-margin);
20212069
padding-bottom: var(--normal-margin);
2070+
20222071
}
20232072

20242073
.toolbar-plugin input {
20252074
margin: 0;
2026-
border-radius: var(--border-radius);
2075+
font-size: var(--small-medium-font);
20272076
}
20282077

20292078
/* @end */
@@ -2051,6 +2100,10 @@ hr {
20512100
text-decoration: underline;
20522101
}
20532102

2103+
.md-editor>textarea {
2104+
font-size: 1.6rem !important;
2105+
}
2106+
20542107
/* @end */
20552108

20562109
@media (min-width: 768px) {
@@ -2206,7 +2259,9 @@ nav#nav-links {
22062259
padding-right: 0;
22072260
padding-left: 0;
22082261
}
2209-
#search {
2262+
2263+
2264+
#search, .toolbar-plugin {
22102265
padding-left: 3vw;
22112266
padding-right: 3vw;
22122267
}

‎stack/linklist.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103

104104
<h2>{if="$is_logged_in"}<span class="ctrl-checkbox" aria-hidden="true">
105105
<input type="checkbox" class="link-checkbox rounded-checkbox" value="{$value.id}"></span>{/if}
106-
{if="$value.sticky"} <svg width="9" height="15" class="pin-icon"><!--<rect width="21" height="21" class="svg-fill-empty"/>--><polygon class="svg-fill" points="5.2,15 5.2,10.2 8.9,10.2 8.9,9.2 7.4,7.6 7.4,1.6 8.6,1.6 8.6,0 0.4,0 0.4,1.6 1.6,1.6 1.6,7.6 0.1,9.2 0.1,10.2
106+
{if="$value.sticky"} <svg viewBox="0 0 9 15" class="pin-icon"><!--<rect width="21" height="21" class="svg-fill-empty"/>--><polygon class="svg-fill" points="5.2,15 5.2,10.2 8.9,10.2 8.9,9.2 7.4,7.6 7.4,1.6 8.6,1.6 8.6,0 0.4,0 0.4,1.6 1.6,1.6 1.6,7.6 0.1,9.2 0.1,10.2
107107
3.8,10.2 3.8,15 "/></svg>{/if}
108108
<a href="{$value.real_url}" class="linklist-real-url"><span class="linklist-link">{$value.title_html}</span><span class="url-display">{$value.real_url}</span></a>
109109
</h2>

0 commit comments

Comments
 (0)