diff --git a/scss/main.scss b/scss/main.scss
index 89d209699c14cbfb185cf0556a0805c3814ebd82..addae37547d11c435af03c54f643ed454cf146f5 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,4 +1,4 @@
-$breakpoint: 520px;
+$breakpoint: 360px;
$tablet: $breakpoint;
$body-font-size: 1rem;
@@ -18,6 +18,11 @@
$table-cell-padding: 0.5em;
$table-cell-border-width: 0;
+$tag-radius: 0;
+$tag-delete-margin: 15px;
+
+$title-weight: normal;
+
@import "bulma/sass/base/_all.sass";
@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/grid/_all.sass";
@@ -28,7 +33,8 @@ @import "bulma/sass/layout/_all.sass";
@import "bulma/sass/elements/_all.sass";
body {
- font-family: $family-primary
+ font-family: $family-primary;
+ padding-bottom: 10px;
}
.input, .button{
@@ -85,3 +91,12 @@
.img {
object-fit: cover;
}
+
+// exting size
+.text-size-1{
+ @extend .is-size-4 !optional;
+}
+
+.text-size-2{
+ @extend .is-size-5 !optional;
+}
diff --git a/templates/album.qtpl b/templates/album.qtpl
index ce8111e926fdfff1f11d2947d5822bb7b1ef09c2..9f4c0bd67ae7fdd6d21ebf52839cc6197be17f3c 100644
--- a/templates/album.qtpl
+++ b/templates/album.qtpl
@@ -20,10 +20,10 @@
{% func (p *AlbumPage) Title() %}Media{% endfunc %}
{% func (p *AlbumPage) Content() %}
-<h1 class="title">{%s p.Name %}</h1>
+<h1 class="title text-size-1">{%s p.Name %}</h1>
<div class="tags are-large">
{% for _, a := range p.Albums %}
- <a href="/album/?albumId={%s FromUInttoString(&a.ID) %}" class="tag">{%s a.Name %}</a>
+ <a href="/album/?albumId={%s FromUInttoString(&a.ID) %}" class="tag text-size-2">{%s a.Name %}</a>
{% endfor %}
</div>
<div class="columns is-multiline">
@@ -41,7 +41,7 @@ {% endif %}
</div>
{% endfor %}
</div>
-<div class="row">
+<div>
<a href="/media/?page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
</div>
{% endfunc %}
diff --git a/templates/base.qtpl b/templates/base.qtpl
index 772167d70fbbcb8c1374c2f10243122c33085a25..b1878ba8f436c065ca17b9e31cebe36f7dcee0be 100644
--- a/templates/base.qtpl
+++ b/templates/base.qtpl
@@ -33,16 +33,16 @@ </head>
<body>
<nav class="navbar">
<div class="navbar-start">
- <a href="/fs/" class="navbar-item">
- files
+ <a href="/fs/" class="navbar-item text-size-1">
+ file
</a>
- <a href="/media/" class="navbar-item">
+ <a href="/media/" class="navbar-item text-size-1">
media
</a>
- <a href="/album/" class="navbar-item">
+ <a href="/album/" class="navbar-item text-size-1">
album
</a>
- <a href="/settings/" class="navbar-item">
+ <a href="/settings/" class="navbar-item text-size-1">
settings
</a>
</div>
diff --git a/templates/fs.qtpl b/templates/fs.qtpl
index 489f79fc1ab56f05e95f5e240e2250d5f456f9f4..3dc2c5ab5912b7c9241d8a7a49a1ad5a9cf6051d 100644
--- a/templates/fs.qtpl
+++ b/templates/fs.qtpl
@@ -14,7 +14,7 @@ <div class="panel">
<div class="panel-block">
<div class="columns file-row is-gapless is-mobile">
<div id="path" class="container-fluid">
- <small>{% for _, h := range p.Page.History %}<a href="/fs?path={%s h.UrlEncodedPath %}" >{%s h.Name %}/</a>{% endfor %}</small>
+ <small>{% for _, h := range p.Page.History %}<a class="text-size-2" href="/fs?path={%s h.UrlEncodedPath %}" >{%s h.Name %}/</a>{% endfor %}</small>
</div>
</div>
</div>
@@ -22,15 +22,17 @@ {% for _, f := range p.Page.Files %}
<div class="panel-block">
<div class="columns wide-column is-mono is-gapless is-mobile">
<div class="column">
+ <span class="text-size-2">
{% if p.ShowMode %}{%s f.Info.Mode().String() %} {% endif %}
{% if p.ShowOwner %}{%d f.GetGid() %}:{%d f.GetUid() %} {% endif %}
{% if f.Info.IsDir() %}
- <a href="/?path={%s f.UrlEncodedPath %}">{%s f.Info.Name() %}/</a>
+ </span>
+ <a class="text-size-2" href="/?path={%s f.UrlEncodedPath %}">{%s f.Info.Name() %}/</a>
{% else %}
{%s f.Info.Name() %}
{% endif %}
</div>
- <div class="column has-text-right">{%dl f.Info.Size() %} B</div>
+ <div class="column text-size-2 has-text-right">{%dl f.Info.Size() %} B</div>
</div>
</div>
{% endfor %}
diff --git a/templates/media.qtpl b/templates/media.qtpl
index ae58e6181411735d7552404a7f6c5c443cb0dcae..11fc9bcd5a62b0e6d0b7bf0e0a0cf51ce96b27de 100644
--- a/templates/media.qtpl
+++ b/templates/media.qtpl
@@ -33,7 +33,7 @@ {% endif %}
</div>
{% endfor %}
</div>
-<div class="row">
+<div>
<a href="/media/?page={%d p.Next.Page %}" class="button is-pulled-right">next</a>
</div>
{% endfunc %}
diff --git a/templates/settings.qtpl b/templates/settings.qtpl
index 4207439c7d9d685f429ba3298ff3f23383a75581..3d1af81f75a942aaf7221271e19eb82aebd5d7c9 100644
--- a/templates/settings.qtpl
+++ b/templates/settings.qtpl
@@ -15,7 +15,7 @@ <div class="column is-one-third">
<form action="/settings/", method="post">
<div class="field">
<div class="control">
- <label class="checkbox">
+ <label class="checkbox text-size-2">
<input type="checkbox" id="showMode" name="showMode" {% if p.Settings.ShowMode %}checked{% endif %}>
Show File Modes
</label>
@@ -23,7 +23,7 @@ </div>
</div>
<div class="field">
<div class="control">
- <label class="checkbox">
+ <label class="checkbox text-size-2">
<input type="checkbox" id="showOwner" name="showOwner" {% if p.Settings.ShowOwner %}checked{% endif %}>
Show File Owner
</label>
@@ -31,7 +31,7 @@ </div>
</div>
<div class="field">
<div class="control">
- <label class="checkbox">
+ <label class="checkbox text-size-2">
<input type="checkbox" id="preloadVideoMetadata" name="preloadVideoMetadata" {% if p.Settings.PreloadVideoMetadata %}checked{% endif %}>
Preload video metadata
</label>
@@ -44,12 +44,12 @@ </form>
</div>
<div class="column">
{% for _, user := range p.Users %}
- <div class="panel-block">
+ <div class="panel-block field">
<div class="columns wide-column is-gapless is-mobile">
- <div class="column">
+ <div class="column text-size-2">
{%s user.Username %}
</div>
- <div class="column">
+ <div class="column text-size-2">
{%s user.Path %}
</div>
<div class="column has-text-right"><a href="/users?userId={%s FromUInttoString(&user.ID) %}">Edit</a> <a href="/users/delete?userId={%s FromUInttoString(&user.ID) %}" class="is-danger">Delete</a></div>
@@ -57,7 +57,7 @@ </div>
</div>
{% endfor %}
<div class="field">
- <a href="/users/" class="button">Create</a>
+ <a href="/users/" class="button">create</a>
</div>
</div>
</div>