From c0228b5aaa6013933c882dad5b570d00bf83269b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Wed, 21 Jul 2021 09:02:52 +0200
Subject: [PATCH] adding

---
 public/css/index.css                 |  5 ++++
 resources/js/components/buckets.riot | 38 ++++++++++++++++++++++++++++
 resources/js/critical.js             |  2 +-
 resources/js/dashboard.js            |  0
 resources/js/index.js                |  2 ++
 resources/scss/_container.scss       |  4 +++
 resources/scss/index.scss            |  3 ++-
 resources/views/bucket/form.html     |  6 ++---
 resources/views/bucket/single.html   |  2 +-
 resources/views/index.html           | 30 ++++++++--------------
 10 files changed, 67 insertions(+), 25 deletions(-)
 create mode 100644 resources/js/components/buckets.riot
 create mode 100644 resources/js/dashboard.js
 create mode 100644 resources/scss/_container.scss

diff --git a/public/css/index.css b/public/css/index.css
index 6fbd025..c30802b 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -14905,6 +14905,11 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
     font-size: 2.7rem;
   }
 }
+.container--app {
+  max-width: 100%;
+  padding: 15px 30px;
+}
+
 .turbolinks-progress-bar {
   width: 5px;
   height: 100%;
diff --git a/resources/js/components/buckets.riot b/resources/js/components/buckets.riot
new file mode 100644
index 0000000..8fc9525
--- /dev/null
+++ b/resources/js/components/buckets.riot
@@ -0,0 +1,38 @@
+<app-buckets>
+    <div class="buckets">
+        <div class="grid">
+            <div class="col-12 col-md-4" each={ bucket in buckets }>
+                <a class="panel" href="/bucket/single/{ bucket.id }">
+                    { bucket.title }
+                </a>
+            </div>
+        </div>
+        <div class="buckets__more">
+            <button type="button" class="button" onclick={ handleClick }>
+                More
+                <span class="icon is-small is-left">
+                    <svg aria-hidden="true">
+                        <use xlink:href="/symbol-defs.svg#icon-add-circle"></use>
+                    </svg>
+                </span>
+            </button>
+        </div>
+    </div>
+    <script>
+
+        /**
+         *
+         *
+         *
+         *  @author Björn Hase
+         *
+         */
+
+        export default {
+            handleClick() {
+
+            }
+        }
+
+    </script>
+</app-buckets>
\ No newline at end of file
diff --git a/resources/js/critical.js b/resources/js/critical.js
index c1dc283..033586c 100644
--- a/resources/js/critical.js
+++ b/resources/js/critical.js
@@ -1,4 +1,4 @@
 const Turbolinks = require('turbolinks')
 
 Turbolinks.start()
-Turbolinks.setProgressBarDelay(500)
\ No newline at end of file
+Turbolinks.setProgressBarDelay(500)
diff --git a/resources/js/dashboard.js b/resources/js/dashboard.js
new file mode 100644
index 0000000..e69de29
diff --git a/resources/js/index.js b/resources/js/index.js
index e69de29..2753ac8 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -0,0 +1,2 @@
+window.axios = require('axios')
+window.riot = require('riot')
\ No newline at end of file
diff --git a/resources/scss/_container.scss b/resources/scss/_container.scss
new file mode 100644
index 0000000..84782fa
--- /dev/null
+++ b/resources/scss/_container.scss
@@ -0,0 +1,4 @@
+.container--app {
+    max-width: 100%;
+    padding: 15px 30px;
+}
\ No newline at end of file
diff --git a/resources/scss/index.scss b/resources/scss/index.scss
index 2003f3f..5455a9d 100644
--- a/resources/scss/index.scss
+++ b/resources/scss/index.scss
@@ -1,5 +1,6 @@
 @import
-    '../../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui';
+    '../../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui',
+    'container';
 
 .turbolinks-progress-bar {
     width: 5px;
diff --git a/resources/views/bucket/form.html b/resources/views/bucket/form.html
index 0c87824..7be5ad8 100644
--- a/resources/views/bucket/form.html
+++ b/resources/views/bucket/form.html
@@ -1,9 +1,9 @@
 <% layout('./../layout.html') %>
 
-<div class="container">
+<div class="container container--app">
     <div class="grid">
         <div class="col-12">
-            <h1 class="highlight m-top-5">
+            <h1 class="highlight">
                 Create Bucket
             </h1>
         </div>
@@ -56,7 +56,7 @@
                     <% }) %>
                 </div>
 
-                <div class="">
+                <div class="m-top-5">
                     <button class="button hover-fill-text-constrast">
                         Create
                         <svg class="icon p-left-3 size-large" aria-hidden="true">
diff --git a/resources/views/bucket/single.html b/resources/views/bucket/single.html
index 33152e4..7b86612 100644
--- a/resources/views/bucket/single.html
+++ b/resources/views/bucket/single.html
@@ -1,6 +1,6 @@
 <% layout('./../layout.html') %>
 
-<div class="container">
+<div class="container container--app">
     <div class="grid">
         <div class="col-12">
             <h1><%= it.bucket.title %></h1>
diff --git a/resources/views/index.html b/resources/views/index.html
index d052f0a..d3fbaa0 100644
--- a/resources/views/index.html
+++ b/resources/views/index.html
@@ -1,27 +1,19 @@
 <% layout('./layout.html') %>
 
-<div class="container">
+<div class="container container--app">
     <div class="grid">
         <div class="col-12">
-            <section class="flex m-bottom-5"">
-                <h2 class="m-bottom-2 m-right-2 highlight">
-                    Buckets
-                </h2>
-                <a class="button m-0 " href="/bucket/create">
-                    Create
-                </a>
-            </section>
+            <a class="button m-bottom-5" href="/bucket/create">
+                Create Bucket
+                <svg class="icon p-left-3 size-large" aria-hidden="true">
+                    <use xlink:href="/symbol-defs.svg#icon-circle-add"></use>
+                </svg>
+            </a>
             <section class="m-bottom-5">
-                <h3 class="highlight">
-                    Your Buckets
-                </h3>
-                <app-buckets visiblity="private"></app-buckets>
-            </section>
-            <section class="m-bottom-5">
-                <h3 class="highlight">
-                    Other Buckets
-                </h3>
-                <app-buckets visiblity="public,community"></app-buckets>
+                <h2 class="highlight">
+                    Public
+                </h2>
+                <app-buckets visiblity="public"></app-buckets>
             </section>
         </div>
     </div>