Commit 7e2bcf93 authored by Vlad Dumitru's avatar Vlad Dumitru
Browse files

Break up stylus structure, adapt to speechcake@1c264125

parent a2d32cda
...@@ -27,7 +27,8 @@ ...@@ -27,7 +27,8 @@
[ring/ring-core "1.9.1"] [ring/ring-core "1.9.1"]
[ring/ring-defaults "0.3.2"] [ring/ring-defaults "0.3.2"]
[selmer "1.12.33"] [selmer "1.12.33"]
[clj-http "3.12.0"]] [clj-http "3.12.0"]
[clojure.java-time "0.3.2"]]
:min-lein-version "2.0.0" :min-lein-version "2.0.0"
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="side"> <div class="side">
<hr> <hr>
<div class="content"> <div class="content">
<h2 class="field"> <h2 class="field" style="padding: 1rem 0;">
<span class="dim name">bundle</span> <span class="dim name">bundle</span>
<span class="value">{{ name }}</span> <span class="value">{{ name }}</span>
</h2> </h2>
...@@ -12,11 +12,49 @@ ...@@ -12,11 +12,49 @@
<div class="field"> <div class="field">
<span class="dim name">layers</span> <span class="dim name">layers</span>
<span class="value"> <span class="value">
{% for l in layers %} <ul>
<a href="#" class="tag">{{ l }}</a> {% for l in layers %}
{% endfor %} <li>
<a href="#" class="layer">{{ l.name }}</a>
<span class="dim">[{{ l.xmin }} .. {{ l.xmax }}]</span>
</li>
{% endfor %}
</ul>
</span> </span>
</div> </div>
<hr>
<div class="field">
<div class="dim name">fragments</div>
<div class="value">
<ul class="fragments">
{% for f in fragments %}
<li>
<a href="#" class="fragment">{{ f.id }}</a>
{% for l in f.layers %}
<span class="layer">
{{ l.name }}
<span class="dim">[{{ l.xmin }} .. {{ l.xmax }}]</span>
</span>
{% endfor %}
</li>
{% endfor %}
</ul>
</div>
</div>
<hr>
<div class="field">
<div class="dim name">update</div>
<div class="value">
<form method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file" multiple><!--
--><label for="file"><span id="file-name">Select file</span></label>
{% csrf-field %}
<button id="submit-button" type="submit" disabled>Submit</button>
</form>
</div>
</div>
</div> </div>
<hr> <hr>
</div> </div>
...@@ -42,3 +80,17 @@ ...@@ -42,3 +80,17 @@
<hr> <hr>
</div> </div>
{% endblock %} {% endblock %}
{% block page-scripts %}
<script>
const file = document.querySelector('#file');
file.addEventListener('change', (e) => {
const [file] = e.target.files;
const { name: fileName, size } = file;
const fileSize = (size / 1000).toFixed(2);
const fileNameAndSize = `${fileName} (${fileSize}KB)`;
document.querySelector('#file-name').textContent = 'Selected: ' + fileNameAndSize;
document.querySelector('#submit-button').disabled = false;
});
</script>
{% endblock %}
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
{% if c.type = "folder" %} {% if c.type = "folder" %}
<span class="name"><a href="/tree/{{ c.name }}">{{ c.name }}</a>/</span> <span class="name"><a href="/tree/{{ c.name }}">{{ c.name }}</a>/</span>
{% elif c.type = "bundle" %} {% elif c.type = "bundle" %}
<span class="name"><a href="/bundle/{{ key }}/{{ c.name }}">{{ c.name }}</a></span> <span class="name"><a href="/bundle{{ key }}/{{ c.name }}">{{ c.name }}</a></span>
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
......
*
box-sizing border-box
html
font-family base-font-stack
font-size base-font-size
font-weight base-font-weight
line-height base-line-height
color base-fg
background-color base-bg
width 100%
height 100%
main
height 100%
body
margin 2.5%
overflow hidden
width 95%
height 75%
.sides
display flex
flex-flow row nowrap
height 100%
& > .side
flex-basis 50%
height 100%
& > .content
height 100%
overflow-y auto
scrollbar-color accent white
scrollbar-width thin
&.text-content
padding-left 25%
&.rhs
opacity 0.25
&.rhs:hover
opacity 1
header
max-height 15%
display flex
flex-flow column nowrap
justify-content space-between
footer
opacity 0.25
padding 0
transform rotate(180deg)
nav
position relative
margin 0.5rem 0 1rem 12.5%
color alpha(base-fg, 25%)
&::before
position absolute
left -2ch
content '>'
& > .active
color base-fg
a
font-weight base-font-weight
text-decoration none
color accent
transition all 0.05s ease-in-out
&:hover
color accent-dd
&:active
color base-bg
background-color accent-l
a.ext::after
content 'ext'
position relative
font-size 0.66em
top -0.5rem
color base-fg
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap') @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400&display=swap')
base-font-stack = 'Source Code Pro', monospace @import 'variables'
base-font-weight = 400 @import 'base'
bold-font-weight = 700 @import 'layout'
base-font-size = 18px @import 'links'
base-line-height = 1 @import 'text-content'
base-fg = #333
base-bg = #fff
accent = #2274a5
accent-l = alpha(accent, 75%)
accent-ll = alpha(accent, 50%)
accent-d = darken(accent, 25%)
accent-dd = darken(accent, 50%)
*
box-sizing border-box
html
font-family base-font-stack
font-size base-font-size
font-weight base-font-weight
line-height base-line-height
color base-fg
background-color base-bg
width 100%
height 100%
main
height 100%
body
margin 2.5%
overflow hidden
width 95%
height 75%
.columns
display flex
flex-flow row nowrap
& > .column
flex-basis 50%
padding-left 12.5%
.sides
display flex
flex-flow row nowrap
height 100%
& > .side
flex-basis 50%
height 100%
& > .content
height 100%
overflow-y auto
scrollbar-color accent white
scrollbar-width thin
&.text-content
padding-left 25%
&.rhs
opacity 0.25
&.rhs:hover
opacity 1
hr hr
margin 0 0 0 25% margin 0 0 0 25%
...@@ -85,37 +16,6 @@ h1, h2, h3, h4 ...@@ -85,37 +16,6 @@ h1, h2, h3, h4
font-weight base-font-weight font-weight base-font-weight
margin 0 margin 0
a
font-weight base-font-weight
text-decoration none
color accent
transition all 0.05s ease-in-out
&:hover
color accent-dd
&:active
color base-bg
background-color accent-l
a.ext::after
content 'ext'
position relative
font-size 0.66em
top -0.5rem
color base-fg
header
max-height 15%
display flex
flex-flow column nowrap
justify-content space-between
footer
opacity 0.25
padding 0
transform rotate(180deg)
.files .files
display flex display flex
flex-flow column nowrap flex-flow column nowrap
...@@ -141,20 +41,6 @@ footer ...@@ -141,20 +41,6 @@ footer
padding 0.125rem padding 0.125rem
cursor pointer cursor pointer
nav
position relative
margin 0.5rem 0 1rem 12.5%
color alpha(base-fg, 25%)
&::before
position absolute
left -2ch
content '>'
& > .active
color base-fg
.layers > span .layers > span
font-size 0.75rem font-size 0.75rem
border 0.125rem solid alpha(accent, 12.5%) border 0.125rem solid alpha(accent, 12.5%)
...@@ -197,7 +83,7 @@ h1.field > .name ...@@ -197,7 +83,7 @@ h1.field > .name
& > .name & > .name
flex-basis 25% flex-basis 25%
padding-right 1rem padding-right 1.5rem
text-align right text-align right
& > .value & > .value
...@@ -221,54 +107,74 @@ h1.field > .name ...@@ -221,54 +107,74 @@ h1.field > .name
margin-bottom 0.5rem margin-bottom 0.5rem
.text-content input[type="file"]
font-size 0.75rem height 0
line-height 1.5 width 0
overflow hidden
& + label
font-family base-font-stack
font-size base-font-size
line-height base-line-height
transition all 0.1s
& > h1, h2, h3 display inline-block
position relative position relative
cursor pointer
color accent
border 1px solid accent-ll
padding 0.5rem
& > h1 &:focus + label, & + label:hover
left -1ch background-color accent-ll
border-color accent-dd
color white
& > h2 &:focus + label
left -2ch // File upload focus state button styles
& > h1 button
font-size 1.5rem font-family base-font-stack
margin-top 3rem font-size base-font-size
line-height base-line-height
& > h2 transition all 0.1s
font-size 1rem
& > h1::before background white
content '#'
left -1ch
& > h2::before display inline-block
content '##' position relative
left -2ch
& > h1::before, h2::before, h3::before color accent
font-weight bold-font-weight
color accent
position relative
& ul border 1px solid accent-ll
list-style-type none padding 0.5rem
list-style-position outside
padding 0
position relative
& > li &:hover
margin 0 0 0.5rem 0 background-color accent-ll
border-color accent-dd
color white
& > ul .fragments
margin-left 2ch font-size 0.75rem
margin-bottom 1rem
& > li::before span.layer
position absolute white-space nowrap
left -2ch
content '-' .value > ul
margin 0
padding 0
list-style-type none
& > li
position relative
line-height 1.2
&::before
position absolute
left -1rem
content '-'
color alpha(base-fg, 50%)
.text-content
font-size 0.75rem
line-height 1.5
& > h1, h2, h3
position relative
& > h1
left -1ch
& > h2
left -2ch
& > h1
font-size 1.5rem
margin-top 3rem
& > h2
font-size 1rem
& > h1::before
content '#'
left -1ch
& > h2::before
content '##'
left -2ch
& > h1::before, h2::before, h3::before
font-weight bold-font-weight
color accent
position relative
& ul
list-style-type none
list-style-position outside
padding 0
position relative
& > li
margin 0 0 0.5rem 0
& > ul
margin-left 2ch
margin-bottom 1rem
& > li::before
position absolute
left -2ch
content '-'
base-font-stack = 'Source Code Pro', monospace
base-font-weight = 400
bold-font-weight = 700
base-font-size = 18px
base-line-height = 1
base-fg = #333
base-bg = #fff
accent = #2274a5
accent-l = alpha(accent, 75%)
accent-ll = alpha(accent, 50%)
accent-d = darken(accent, 25%)
accent-dd = darken(accent, 50%)
(ns konditorei.routes.bundle (ns konditorei.routes.bundle
(:require (:require
[clojure.java.io :as io]
[konditorei.layout :as layout] [konditorei.layout :as layout]
[clojure.tools.logging :as log] [clojure.tools.logging :as log]
[konditorei.middleware :as middleware] [konditorei.middleware :as middleware]
[konditorei.speechcake :as speechcake] [konditorei.speechcake :as speechcake]
[konditorei.util :as util])) [konditorei.util :as util]))
(defn- parse-history [h] (defn- parse-history [{:keys [date author message]}]
(let [[d a m] h] {:date (java.util.Date. (* 1000 (Long/parseLong date)))
{:date (java.util.Date. (* 1000 (Long/parseLong d))) :author author
:author a :message message})
:message m}))
(defn render-bundle [request] (defn render-bundle [request]
(let [key (-> request :path-params :key) (let [key (-> request :path-params :key)
...@@ -27,9 +27,15 @@ ...@@ -27,9 +27,15 @@
:history history :history history
:key key}))) :key key})))
(defn update-bundle [request]
(let [key (-> request :path-params :key)
path (-> request :multipart-params (get "file") :tempfile)
res (speechcake/update-object key (io/file path))]
{:status 200, :body res}))
(defn bundle-routes [] (defn bundle-routes []
["/bundle" ["/bundle"
{:middleware [middleware/wrap-csrf {:middleware [middleware/wrap-csrf
middleware/wrap-formats]} middleware/wrap-formats]}
["*key" {:get render-bundle}]]) ["*key" {:get render-bundle :post update-bundle}]])
...@@ -21,4 +21,4 @@ ...@@ -21,4 +21,4 @@
(-> (url ["readme"]) client/get :body)) (-> (url ["readme"]) client/get :body))
(defn update-object [key data] (defn update-object [key data]
(-> (url