mirror of
https://github.com/go-shiori/shiori.git
synced 2025-09-08 14:05:54 +08:00
Create syle for responsive mode
This commit is contained in:
Radhi Fadlillah
parent
0940fd66ef
commit
ead4264280
4 changed files with 86 additions and 41 deletions
50
cmd/serve.go
50
cmd/serve.go
|
|
@ -15,7 +15,6 @@ import (
|
|||
"golang.org/x/crypto/bcrypt"
|
||||
"html/template"
|
||||
"io"
|
||||
"mime"
|
||||
"net/http"
|
||||
fp "path/filepath"
|
||||
"strings"
|
||||
|
|
@ -83,26 +82,30 @@ func init() {
|
|||
}
|
||||
|
||||
func serveFiles(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
||||
// Read asset path
|
||||
path := r.URL.Path
|
||||
if path[0:1] == "/" {
|
||||
path = path[1:]
|
||||
}
|
||||
// // Read asset path
|
||||
// path := r.URL.Path
|
||||
// if path[0:1] == "/" {
|
||||
// path = path[1:]
|
||||
// }
|
||||
|
||||
// Load asset
|
||||
asset, err := assets.ReadFile(path)
|
||||
checkError(err)
|
||||
// // Load asset
|
||||
// asset, err := assets.ReadFile(path)
|
||||
// checkError(err)
|
||||
|
||||
// Set response header content type
|
||||
ext := fp.Ext(path)
|
||||
mimeType := mime.TypeByExtension(ext)
|
||||
if mimeType != "" {
|
||||
w.Header().Set("Content-Type", mimeType)
|
||||
}
|
||||
// // Set response header content type
|
||||
// ext := fp.Ext(path)
|
||||
// mimeType := mime.TypeByExtension(ext)
|
||||
// if mimeType != "" {
|
||||
// w.Header().Set("Content-Type", mimeType)
|
||||
// }
|
||||
|
||||
// Serve asset
|
||||
buffer := bytes.NewBuffer(asset)
|
||||
io.Copy(w, buffer)
|
||||
// // Serve asset
|
||||
// buffer := bytes.NewBuffer(asset)
|
||||
// io.Copy(w, buffer)
|
||||
filepath := r.URL.Path
|
||||
filepath = strings.TrimPrefix(filepath, "/")
|
||||
filepath = fp.Join("view", filepath)
|
||||
http.ServeFile(w, r, filepath)
|
||||
}
|
||||
|
||||
func serveIndexPage(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
||||
|
|
@ -113,10 +116,13 @@ func serveIndexPage(w http.ResponseWriter, r *http.Request, ps httprouter.Params
|
|||
return
|
||||
}
|
||||
|
||||
asset, _ := assets.ReadFile("index.html")
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
buffer := bytes.NewBuffer(asset)
|
||||
io.Copy(w, buffer)
|
||||
// asset, _ := assets.ReadFile("index.html")
|
||||
// w.Header().Set("Content-Type", "text/html")
|
||||
// buffer := bytes.NewBuffer(asset)
|
||||
// io.Copy(w, buffer)
|
||||
filepath := fp.Join("view", "index.html")
|
||||
http.ServeFile(w, r, filepath)
|
||||
|
||||
}
|
||||
|
||||
func serveLoginPage(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -28,13 +28,16 @@
|
|||
</div>
|
||||
<div id="header-menu" v-if="!loading">
|
||||
<a @click="reloadData">
|
||||
<i class="fas fa-cloud fa-fw"></i> Reload
|
||||
<i class="fas fa-cloud fa-fw"></i>
|
||||
<span>Reload</span>
|
||||
</a>
|
||||
<a @click="toggleImage">
|
||||
<i class="fas fa-fw" :class="showImage ? 'fa-eye-slash' : 'fa-eye'"></i> {{showImage ? 'Hide image' : 'Show image'}}
|
||||
<i class="fas fa-fw" :class="showImage ? 'fa-eye-slash' : 'fa-eye'"></i>
|
||||
<span>{{showImage ? 'Hide image' : 'Show image'}}</span>
|
||||
</a>
|
||||
<a @click="logout">
|
||||
<i class="fas fa-sign-out-alt fa-fw"></i> Logout
|
||||
<i class="fas fa-sign-out-alt fa-fw"></i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -42,13 +45,16 @@
|
|||
<p id="n-selected">{{checkedBookmarks.length}} selected</p>
|
||||
<div id="header-menu">
|
||||
<a @click="clearSelectedBookmarks">
|
||||
<i class="fas fa-fw fa-ban"></i> Cancel
|
||||
<i class="fas fa-fw fa-ban"></i>
|
||||
<span>Cancel</span>
|
||||
</a>
|
||||
<a @click="selectAllBookmarks">
|
||||
<i class="fas fa-fw fa-check-square"></i> Select all
|
||||
<i class="fas fa-fw fa-check-square"></i>
|
||||
<span>Select all</span>
|
||||
</a>
|
||||
<a @click="deleteBookmarks(checkedBookmarks)">
|
||||
<i class="fas fa-fw fa-trash"></i> Delete
|
||||
<i class="fas fa-fw fa-trash"></i>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -57,7 +63,7 @@
|
|||
<template v-if="!loading && error === ''">
|
||||
<div id="input-bookmark">
|
||||
<p v-if="inputBookmark.url !== ''">{{inputBookmark.id === -1 ? 'New bookmark' : 'Edit bookmark'}}</p>
|
||||
<input type="text" ref="inputURL" v-model.trim="inputBookmark.url" placeholder="URL for the bookmark" @focus="clearSelectedBookmarks">
|
||||
<input type="text" ref="inputURL" v-model.trim="inputBookmark.url" placeholder="URL for the new bookmark" @focus="clearSelectedBookmarks">
|
||||
<template v-if="inputBookmark.url !== ''">
|
||||
<input type="text" v-model.trim="inputBookmark.title" placeholder="Custom bookmark title (optional)">
|
||||
<input type="text" v-model.trim="inputBookmark.tags" placeholder="Space separated tags for this bookmark (optional)">
|
||||
|
|
@ -96,16 +102,20 @@
|
|||
</div>
|
||||
<div class="bookmark-menu">
|
||||
<a @click="updateBookmark(item.index)">
|
||||
<i class="fas fa-sync"></i> Update
|
||||
<i class="fas fa-sync"></i>
|
||||
<span>Update</span>
|
||||
</a>
|
||||
<a @click="editBookmark(item.index)">
|
||||
<i class="fas fa-pencil-alt"></i> Edit
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
<span>Edit</span>
|
||||
</a>
|
||||
<a @click="deleteBookmarks([item.index])">
|
||||
<i class="far fa-trash-alt"></i> Delete
|
||||
<i class="far fa-trash-alt"></i>
|
||||
<span>Delete</span>
|
||||
</a>
|
||||
<a :href="'/bookmark/'+item.id" target="_blank">
|
||||
<i class="fas fa-history"></i> Cache
|
||||
<i class="fas fa-history"></i>
|
||||
<span>Cache</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
|
|
@ -128,7 +129,7 @@
|
|||
top: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
flex-flow: row wrap;
|
||||
#n-selected {
|
||||
line-height: @headerHeight;
|
||||
font-size: 1.3em;
|
||||
|
|
@ -182,6 +183,8 @@
|
|||
border-right: 0;
|
||||
flex: 1 0;
|
||||
padding: 8px 16px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#header-menu {
|
||||
|
|
@ -196,8 +199,8 @@
|
|||
&:not(:last-child) {
|
||||
border-right: 1px solid @border;
|
||||
}
|
||||
i {
|
||||
margin-right: 4px;
|
||||
span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
&:hover {
|
||||
color: @main;
|
||||
|
|
@ -216,7 +219,7 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin: 32px 8px 20px;
|
||||
margin: 32px 16px 20px;
|
||||
background-color: @headerInputBg;
|
||||
outline: 1px solid @border;
|
||||
>p {
|
||||
|
|
@ -284,11 +287,12 @@
|
|||
}
|
||||
#grid {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex-flow: row nowrap;
|
||||
padding: 4px;
|
||||
>.column {
|
||||
flex: 1 0;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
>*:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
@ -312,6 +316,31 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
#header {
|
||||
position: static;
|
||||
#header-menu>a>span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#main {
|
||||
margin-top: 0;
|
||||
.bookmark-menu>a>span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 632px) {
|
||||
#main #input-bookmark {
|
||||
width: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
#header #logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#cache-page {
|
||||
|
|
@ -594,8 +623,8 @@
|
|||
padding: 8px;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
i {
|
||||
margin-right: 4px;
|
||||
span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid @border;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue