go-shiori/shiori
1
1
Fork 0
mirror of https://github.com/go-shiori/shiori.git synced 2025-09-12 16:04:57 +08:00
Code Issues Projects Releases Packages Wiki Activity

Create syle for responsive mode

Browse source
This commit is contained in:
Radhi Fadlillah 2018-02-25 21:39:46 +07:00
parent 0940fd66ef
commit ead4264280
4 changed files with 86 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
cmd/serve.go
View file

@ -15,7 +15,6 @@ import (
"golang.org/x/crypto/bcrypt" "golang.org/x/crypto/bcrypt"
"html/template" "html/template"
"io" "io"
"mime"
"net/http" "net/http"
fp "path/filepath" fp "path/filepath"
"strings" "strings"
@ -83,26 +82,30 @@ func init() {
} }
func serveFiles(w http.ResponseWriter, r *http.Request, ps httprouter.Params) { func serveFiles(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
// Read asset path // // Read asset path
path := r.URL.Path // path := r.URL.Path
if path[0:1] == "/" { // if path[0:1] == "/" {
path = path[1:] // path = path[1:]
} // }
// Load asset // // Load asset
asset, err := assets.ReadFile(path) // asset, err := assets.ReadFile(path)
checkError(err) // checkError(err)
// Set response header content type // // Set response header content type
ext := fp.Ext(path) // ext := fp.Ext(path)
mimeType := mime.TypeByExtension(ext) // mimeType := mime.TypeByExtension(ext)
if mimeType != "" { // if mimeType != "" {
w.Header().Set("Content-Type", mimeType) // w.Header().Set("Content-Type", mimeType)
} // }
// Serve asset // // Serve asset
buffer := bytes.NewBuffer(asset) // buffer := bytes.NewBuffer(asset)
io.Copy(w, buffer) // 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) { 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 return
} }
asset, _ := assets.ReadFile("index.html") // asset, _ := assets.ReadFile("index.html")
w.Header().Set("Content-Type", "text/html") // w.Header().Set("Content-Type", "text/html")
buffer := bytes.NewBuffer(asset) // buffer := bytes.NewBuffer(asset)
io.Copy(w, buffer) // 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) { func serveLoginPage(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {

2
view/css/stylesheet.css
View file

File diff suppressed because one or more lines are too long

32
view/index.html
View file

@ -28,13 +28,16 @@
</div> </div>
<div id="header-menu" v-if="!loading"> <div id="header-menu" v-if="!loading">
<a @click="reloadData"> <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>
<a @click="toggleImage"> <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>
<a @click="logout"> <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> </a>
</div> </div>
</template> </template>
@ -42,13 +45,16 @@
<p id="n-selected">{{checkedBookmarks.length}} selected</p> <p id="n-selected">{{checkedBookmarks.length}} selected</p>
<div id="header-menu"> <div id="header-menu">
<a @click="clearSelectedBookmarks"> <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>
<a @click="selectAllBookmarks"> <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>
<a @click="deleteBookmarks(checkedBookmarks)"> <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> </a>
</div> </div>
</template> </template>
@ -57,7 +63,7 @@
<template v-if="!loading && error === ''"> <template v-if="!loading && error === ''">
<div id="input-bookmark"> <div id="input-bookmark">
<p v-if="inputBookmark.url !== ''">{{inputBookmark.id === -1 ? 'New bookmark' : 'Edit bookmark'}}</p> <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 !== ''"> <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.title" placeholder="Custom bookmark title (optional)">
<input type="text" v-model.trim="inputBookmark.tags" placeholder="Space separated tags for this bookmark (optional)"> <input type="text" v-model.trim="inputBookmark.tags" placeholder="Space separated tags for this bookmark (optional)">
@ -96,16 +102,20 @@
</div> </div>
<div class="bookmark-menu"> <div class="bookmark-menu">
<a @click="updateBookmark(item.index)"> <a @click="updateBookmark(item.index)">
<i class="fas fa-sync"></i> Update <i class="fas fa-sync"></i>
<span>Update</span>
</a> </a>
<a @click="editBookmark(item.index)"> <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>
<a @click="deleteBookmarks([item.index])"> <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>
<a :href="'/bookmark/'+item.id" target="_blank"> <a :href="'/bookmark/'+item.id" target="_blank">
<i class="fas fa-history"></i> Cache <i class="fas fa-history"></i>
<span>Cache</span>
</a> </a>
</div> </div>
</div> </div>

43
view/less/stylesheet.less
View file

@ -6,6 +6,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
hyphens: auto;
} }
.spacer { .spacer {
@ -128,7 +129,7 @@
top: 0; top: 0;
z-index: 99; z-index: 99;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row wrap;
#n-selected { #n-selected {
line-height: @headerHeight; line-height: @headerHeight;
font-size: 1.3em; font-size: 1.3em;
@ -182,6 +183,8 @@
border-right: 0; border-right: 0;
flex: 1 0; flex: 1 0;
padding: 8px 16px; padding: 8px 16px;
min-width: 0;
width: 100%;
} }
} }
#header-menu { #header-menu {
@ -196,8 +199,8 @@
&:not(:last-child) { &:not(:last-child) {
border-right: 1px solid @border; border-right: 1px solid @border;
} }
i { span {
margin-right: 4px; margin-left: 4px;
} }
&:hover { &:hover {
color: @main; color: @main;
@ -216,7 +219,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
margin: 32px 8px 20px; margin: 32px 16px 20px;
background-color: @headerInputBg; background-color: @headerInputBg;
outline: 1px solid @border; outline: 1px solid @border;
>p { >p {
@ -284,11 +287,12 @@
} }
#grid { #grid {
display: flex; display: flex;
flex-flow: row; flex-flow: row nowrap;
padding: 4px; padding: 4px;
>.column { >.column {
flex: 1 0; flex: 1 0;
padding: 12px; padding: 12px;
max-width: 100%;
>*:not(:last-child) { >*:not(:last-child) {
margin-bottom: 24px; 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 { #cache-page {
@ -594,8 +623,8 @@
padding: 8px; padding: 8px;
font-size: 0.9em; font-size: 0.9em;
text-align: center; text-align: center;
i { span {
margin-right: 4px; margin-left: 4px;
} }
&:not(:last-child) { &:not(:last-child) {
border-right: 1px solid @border; border-right: 1px solid @border;