mirror of
https://github.com/go-shiori/shiori.git
synced 2025-03-09 22:36:36 +08:00
fix: pwa display on phones with pills (#1070)
* fix: menu buttons on mobile with pill * fix: use all viewport for archive content * chore: remove refresh button
This commit is contained in:
Felipe Martin
GitHub
parent
514df1e8ab
commit
f6279ecef4
8 changed files with 97 additions and 55 deletions
|
|
@ -1 +1 @@
|
|||
:root{--main:#f44336;--border:#e5e5e5;--colorLink:#999;--archiveHeaderBg:rgba(255, 255, 255, 0.95)}@media (prefers-color-scheme:dark){:root{--border:#191919;--archiveHeaderBg:rgba(41, 41, 41, 0.95)}}body{padding:0;margin:0}*{box-sizing:border-box}body.archive{display:grid;grid-template-rows:minmax(1px,auto) 1fr;height:100vh;width:100vw}body.archive .header{display:flex;flex-flow:row wrap;height:60px;box-sizing:border-box;padding:0 16px;align-items:center;font-size:16px;border-bottom:1px solid var(--border);background-color:var(--archiveHeaderBg)}body.archive .header *{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0}body.archive .header>:not(:last-child){margin-right:8px}body.archive .header>.spacer{flex:1}body.archive .header #shiori-logo{font-size:2em;font-weight:100;color:var(--main)}body.archive .header #shiori-logo span{margin-right:8px}body.archive .header a{display:block;color:var(--colorLink);text-decoration:underline}body.archive .header a:focus,body.archive .header a:hover{color:var(--main)}@media (max-width:600px){body.archive .header{font-size:14px;height:50px}body.archive .header #shiori-logo{font-size:1.5em}}body.archive iframe{width:100%;height:100%}
|
||||
:root{--main:#f44336;--border:#e5e5e5;--colorLink:#999;--archiveHeaderBg:rgba(255, 255, 255, 0.95)}@media (prefers-color-scheme:dark){:root{--border:#191919;--archiveHeaderBg:rgba(41, 41, 41, 0.95)}}body{padding:0;margin:0}*{box-sizing:border-box}body.archive{display:grid;grid-template-rows:minmax(1px,auto) 1fr;height:100dvh;width:100%}body.archive .header{display:flex;flex-flow:row wrap;height:60px;box-sizing:border-box;padding:0 16px;align-items:center;font-size:16px;border-bottom:1px solid var(--border);background-color:var(--archiveHeaderBg);grid-row:1}body.archive .header *{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0}body.archive .header>:not(:last-child){margin-right:8px}body.archive .header>.spacer{flex:1}body.archive .header #shiori-logo{font-size:2em;font-weight:100;color:var(--main)}body.archive .header #shiori-logo span{margin-right:8px}body.archive .header a{display:block;color:var(--colorLink);text-decoration:underline}body.archive .header a:focus,body.archive .header a:hover{color:var(--main)}@media (max-width:600px){body.archive .header{font-size:14px;height:50px}body.archive .header #shiori-logo{font-size:1.5em}}body.archive iframe{width:100%;height:100%;border:none;grid-row:2}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,5 @@
|
|||
@import "./variables.less";
|
||||
|
||||
:root {
|
||||
--main: #f44336;
|
||||
--border: #e5e5e5;
|
||||
|
|
@ -10,10 +12,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@header-height: 60px;
|
||||
@screen-sm-max: 600px;
|
||||
@screen-sm-header-height: 50px;
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -26,19 +24,20 @@ body {
|
|||
body.archive {
|
||||
display: grid;
|
||||
grid-template-rows: minmax(1px, auto) 1fr;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
width: 100%;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: @header-height;
|
||||
height: @header-height-desktop;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
padding: 0 @padding-standard;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background-color: var(--archiveHeaderBg);
|
||||
grid-row: 1;
|
||||
|
||||
* {
|
||||
border-width: 0;
|
||||
|
|
@ -49,7 +48,7 @@ body.archive {
|
|||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
margin-right: @padding-small;
|
||||
}
|
||||
|
||||
> .spacer {
|
||||
|
|
@ -62,7 +61,7 @@ body.archive {
|
|||
color: var(--main);
|
||||
|
||||
span {
|
||||
margin-right: 8px;
|
||||
margin-right: @padding-small;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -79,7 +78,7 @@ body.archive {
|
|||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
font-size: 14px;
|
||||
height: @screen-sm-header-height;
|
||||
height: @header-height-mobile;
|
||||
|
||||
#shiori-logo {
|
||||
font-size: 1.5em;
|
||||
|
|
@ -90,5 +89,7 @@ body.archive {
|
|||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ select {
|
|||
|
||||
.content-footer {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
padding: @padding-large;
|
||||
max-width: 840px;
|
||||
margin-bottom: 16px;
|
||||
background-color: var(--contentBg);
|
||||
|
|
@ -19,6 +19,10 @@ select {
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
|
||||
@media @display-mode-pwa {
|
||||
padding-bottom: calc(@padding-large + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
.metadata {
|
||||
|
|
@ -212,14 +216,18 @@ a {
|
|||
#main-scene {
|
||||
min-height: 100%;
|
||||
min-height: 100dvh;
|
||||
padding-top: 60px;
|
||||
padding-left: 60px;
|
||||
padding-top: @header-height-desktop;
|
||||
padding-left: @sidebar-width;
|
||||
background-color: var(--bg);
|
||||
|
||||
@media @display-mode-pwa {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
#main-sidebar {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
width: @sidebar-width;
|
||||
height: 100%;
|
||||
height: 100dvh;
|
||||
position: fixed;
|
||||
|
|
@ -231,8 +239,8 @@ a {
|
|||
a {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
width: 60px;
|
||||
line-height: 60px;
|
||||
width: @sidebar-width;
|
||||
line-height: @sidebar-height-desktop;
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
color: var(--colorSidebar);
|
||||
|
|
@ -253,19 +261,19 @@ a {
|
|||
|
||||
.page-header {
|
||||
top: 0px;
|
||||
left: 60px;
|
||||
left: @sidebar-width;
|
||||
right: 0px;
|
||||
height: 60px;
|
||||
height: @header-height-desktop;
|
||||
position: fixed;
|
||||
color: var(--color);
|
||||
background-color: var(--headerBg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 16px;
|
||||
padding: 0 @padding-standard;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
h1.page-header {
|
||||
line-height: 60px;
|
||||
line-height: @header-height-desktop;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -279,17 +287,17 @@ a {
|
|||
flex: 1 0;
|
||||
font-size: 1.3em;
|
||||
font-weight: 600;
|
||||
line-height: 60px;
|
||||
line-height: @header-height-desktop;
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1 0;
|
||||
min-width: 0;
|
||||
margin-right: 8px;
|
||||
margin-right: @padding-small;
|
||||
font-size: 1.1em;
|
||||
font-weight: 500;
|
||||
line-height: 59px;
|
||||
line-height: calc(@header-height-desktop - 1px);
|
||||
color: var(--color);
|
||||
background-color: var(--contentBg);
|
||||
|
||||
|
|
@ -306,7 +314,7 @@ a {
|
|||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
margin-right: @padding-small;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -341,10 +349,10 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding-top: 50px;
|
||||
@media (max-width: @screen-sm-max) {
|
||||
padding-top: @header-height-mobile;
|
||||
padding-left: 0;
|
||||
padding-bottom: 50px;
|
||||
padding-bottom: @sidebar-height-mobile;
|
||||
|
||||
#main-sidebar {
|
||||
top: auto;
|
||||
|
|
@ -352,10 +360,14 @@ a {
|
|||
bottom: 0;
|
||||
width: 100%;
|
||||
width: 100dvw;
|
||||
height: 50px;
|
||||
height: @sidebar-height-mobile;
|
||||
flex-flow: row nowrap;
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
@media @display-mode-pwa {
|
||||
height: calc(@sidebar-height-mobile + @inlet-bottom);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -363,7 +375,7 @@ a {
|
|||
a {
|
||||
width: auto;
|
||||
flex: 1 0;
|
||||
line-height: 50px;
|
||||
line-height: @sidebar-height-mobile;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
|
@ -375,13 +387,13 @@ a {
|
|||
|
||||
.page-header {
|
||||
left: 0;
|
||||
height: 50px;
|
||||
height: @header-height-mobile;
|
||||
}
|
||||
|
||||
h1.page-header {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
line-height: 50px;
|
||||
line-height: @header-height-mobile;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
height: 100dvh;
|
||||
z-index: 10001;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding: 32px;
|
||||
padding: @padding-large;
|
||||
|
||||
.custom-dialog {
|
||||
display: flex;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
resize: both;
|
||||
|
||||
.custom-dialog-header {
|
||||
padding: 16px;
|
||||
padding: @padding-standard;
|
||||
color: var(--colorDialogHeader);
|
||||
background-color: var(--dialogHeaderBg);
|
||||
font-weight: 600;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
.custom-dialog-body {
|
||||
padding: 16px 16px 0;
|
||||
padding: @padding-standard @padding-standard 0;
|
||||
display: grid;
|
||||
max-height: 100%;
|
||||
min-height: 80px;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
grid-template-columns: max-content 1fr;
|
||||
align-content: start;
|
||||
align-items: baseline;
|
||||
grid-gap: 16px;
|
||||
grid-gap: @padding-standard;
|
||||
flex-grow: 1;
|
||||
|
||||
&::after {
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
> label {
|
||||
color: var(--color);
|
||||
padding: 8px 0;
|
||||
padding: @padding-small 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
> input[type="password"],
|
||||
> textarea {
|
||||
color: var(--color);
|
||||
padding: 8px;
|
||||
padding: @padding-small;
|
||||
font-size: 1em;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--contentBg);
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
|
||||
> input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
margin-right: @padding-small;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
> .suggestion {
|
||||
position: absolute;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
padding: @padding-small;
|
||||
background-color: var(--contentBg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--color);
|
||||
|
|
@ -129,14 +129,18 @@
|
|||
}
|
||||
|
||||
.custom-dialog-footer {
|
||||
padding: 16px;
|
||||
padding: @padding-standard;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid var(--border);
|
||||
|
||||
@media @display-mode-pwa {
|
||||
padding-bottom: calc(@padding-standard + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
> a {
|
||||
padding: 0 8px;
|
||||
padding: 0 @padding-small;
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
color: var(--color);
|
||||
|
|
@ -159,7 +163,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@media only screen and (max-width: @screen-md-max) {
|
||||
.custom-dialog-overlay {
|
||||
padding: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
@import "./libs/fontawesome.min.css";
|
||||
|
||||
// Less files
|
||||
@import "./variables.less";
|
||||
@import "./theme.less";
|
||||
@import "./common.less";
|
||||
@import "./custom-dialog.less";
|
||||
|
|
|
|||
30
internal/view/assets/less/variables.less
Normal file
30
internal/view/assets/less/variables.less
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// Layout dimensions
|
||||
@sidebar-width: 60px;
|
||||
@sidebar-height-desktop: 60px;
|
||||
@sidebar-height-mobile: 50px;
|
||||
|
||||
// Header dimensions
|
||||
@header-height-desktop: 60px;
|
||||
@header-height-mobile: 50px;
|
||||
|
||||
// Media query breakpoints
|
||||
@screen-sm-max: 600px;
|
||||
@screen-md-max: 768px;
|
||||
|
||||
// Padding and spacing
|
||||
@padding-standard: 16px;
|
||||
@padding-large: 20px;
|
||||
@padding-small: 8px;
|
||||
|
||||
// Border radius
|
||||
@border-radius-standard: 4px;
|
||||
|
||||
// Inlets
|
||||
@inlet-bottom: 20px;
|
||||
|
||||
// Display mode detection
|
||||
@display-mode-browser: ~"(display-mode: browser)";
|
||||
@display-mode-standalone: ~"(display-mode: standalone)";
|
||||
@display-mode-minimal-ui: ~"(display-mode: minimal-ui)";
|
||||
@display-mode-fullscreen: ~"(display-mode: fullscreen)";
|
||||
@display-mode-pwa: ~"(display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui)";
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<title>Shiori - Bookmarks Manager</title>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
|
||||
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="assets/res/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/res/apple-touch-icon-144x144.png">
|
||||
|
|
@ -95,16 +95,14 @@
|
|||
mainClick: () => {
|
||||
this.dialog.loading = true;
|
||||
fetch(new URL("api/v1/auth/logout", document.baseURI), {
|
||||
method: "post",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${localStorage.getItem("shiori-token")}`
|
||||
}
|
||||
method: "post"
|
||||
}).then(response => {
|
||||
if (!response.ok) throw response;
|
||||
return response;
|
||||
}).then(() => {
|
||||
localStorage.removeItem("shiori-account");
|
||||
localStorage.removeItem("shiori-token");
|
||||
document.cookie = `session-id=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
document.cookie = `token=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
this.isLoggedIn = false;
|
||||
this.loginRequired = true;
|
||||
|
|
@ -191,6 +189,7 @@
|
|||
// Clear invalid session data
|
||||
localStorage.removeItem("shiori-account");
|
||||
localStorage.removeItem("shiori-token");
|
||||
document.cookie = `session-id=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
document.cookie = `token=; Path=${new URL(document.baseURI).pathname}; Expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
|
||||
return false;
|
||||
}
|
||||
|
|
@ -203,11 +202,6 @@
|
|||
if (isValid) {
|
||||
this.loadSetting();
|
||||
this.loadAccount();
|
||||
|
||||
// Set the token cookie if empty
|
||||
if (!document.cookie.includes("token")) {
|
||||
document.cookie = `token=${localStorage.getItem("shiori-token")}; Path=${new URL(document.baseURI).pathname}; Expires=${new Date(Date.now() + 1000 * 60 * 60 * 24 * 30).toUTCString()};`;
|
||||
}
|
||||
} else {
|
||||
this.loginRequired = true;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue