Merge pull request #5 from pedroseac/master

UI Revamp - added _v2 version using VueJS framework
sharifmarat · Aug 10, 2018 · 3d0fbde · 3d0fbde
2 parents d4a6174 + 32106c2
commit 3d0fbde
Show file tree

Hide file tree

Showing 23 changed files with 880 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+vb.sqlite
diff --git a/_v2/events.html b/_v2/events.html
@@ -0,0 +1,52 @@
+  <html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Let's volleyball</title>
+
+    <!-- common css -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Anonymous+Pro:400,700,400italic,700italic|Merriweather:400,700,300">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+    <link rel="stylesheet" href="src/css/bulma.min.css">
+    <link rel="stylesheet" href="src/css/main.css">
+
+    <!-- components  css -->
+    <link rel="stylesheet" href="src/css/components/vue-datetime.min.css">
+
+    <!-- page css -->
+    <link rel="stylesheet" href="src/css/events.css">
+
+    <!-- common js -->
+    <script src="src/js/external/vue.min.js"></script>
+    <script src="src/js/external/jquery-2.2.3.min.js"></script>
+    <script src="src/js/external/luxon.min.js"></script>
+    <script src="src/js/helper.js"></script>
+
+    <!-- components js -->
+    <script src="src/js/components/main-navbar.js"></script>
+    <script src="src/js/components/vue-datetime.min.js"></script>
+
+    <!--  page js -->
+    <script src="src/js/events.js"></script>
+  </head>
+  <body>
+    <nav id="navbar">
+      <main-navbar></main-navbar>
+    </nav>
+
+    <div class="container is-fluid">
+      <div class="section">
+        <div class="level">
+          <p>
+            List of most recent events. Events are not clickable yet. A primary event is displayed on the <a href="index.html">main page</a>.
+          </p>
+          <br>
+        </div>
+
+        <div class="level">
+          <div id="events-list"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+  </html>
diff --git a/_v2/index.html b/_v2/index.html
@@ -0,0 +1,53 @@
+  <html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <link rel="shortcut icon" href="">
+    <title>Let's volleyball</title>
+
+    <!-- common css -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Anonymous+Pro:400,700,400italic,700italic|Merriweather:400,700,300">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+    <link rel="stylesheet" href="src/css/bulma.min.css">
+    <link rel="stylesheet" href="src/css/main.css">
+
+    <!-- components css -->
+    <link rel="stylesheet" href="src/css/components/modal.css">
+
+    <!-- page css -->
+    <link rel="stylesheet" href="src/css/index.css">
+
+    <!--  common js -->
+    <script src="src/js/external/vue.min.js"></script>
+    <script src="src/js/external/jquery-2.2.3.min.js"></script>
+    <script src="src/js/external/luxon.min.js"></script>
+    <script src="src/js/external/[email protected]"></script>
+    <script src="src/js/helper.js"></script>
+
+    <!-- components js -->
+    <script src="src/js/components/main-navbar.js"></script>
+    <script src="src/js/components/modal.js"></script>
+
+    <!-- page js -->
+    <script src="src/js/external/atc.min.js"></script>
+    <script src="src/js/index.js"></script>
+  </head>
+  <body>
+    <nav id="navbar">
+      <main-navbar></main-navbar>
+    </nav>
+
+    <div class="container is-fluid">
+      <div class="section column">
+        <div class="level columns">
+          <div id="current-event-info"></div>
+        </div>
+
+        <div class="level columns">
+          <div id="players-list"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+
+  </html>
diff --git a/_v2/shame.html b/_v2/shame.html
@@ -0,0 +1,40 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Let's volleyball</title>
+
+  <!-- common css -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Anonymous+Pro:400,700,400italic,700italic|Merriweather:400,700,300">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+  <link rel="stylesheet" href="src/css/bulma.min.css">
+  <link rel="stylesheet" href="src/css/main.css">
+
+  <!-- common js -->
+  <script src="src/js/external/vue.min.js"></script>
+  <script src="src/js/external/jquery-2.2.3.min.js"></script>
+  <script src="src/js/external/luxon.min.js"></script>
+  <script src="src/js/helper.js"></script>
+
+  <!-- components js -->
+  <script src="src/js/components/main-navbar.js"></script>
+  <script src="src/js/components/vue-datetime.min.js"></script>
+
+  <!--  page js -->
+  <script src="src/js/shame.js"></script>
+</head>
+  <body>
+    <nav id="navbar">
+      <main-navbar></main-navbar>
+    </nav>
+
+    <div class="container is-fluid">
+      <div class="section">
+        <div class="level">
+          <h1 class="title">Hall of Shame</h1>
+          <div id="shame-list"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/_v2/src/css/bulma.min.css b/_v2/src/css/bulma.min.css
diff --git a/_v2/src/css/components/modal.css b/_v2/src/css/components/modal.css
@@ -0,0 +1,8 @@
+.modal-body {
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
+    color: #4a4a4a;
+    display: block;
+    padding: 1.25rem;
+}
diff --git a/_v2/src/css/components/vue-datetime.min.css b/_v2/src/css/components/vue-datetime.min.css
diff --git a/_v2/src/css/events.css b/_v2/src/css/events.css
@@ -0,0 +1,11 @@
+.theme-primary .vdatetime-popup__header,
+.theme-primary .vdatetime-calendar__month__day--selected > span > span,
+.theme-primary .vdatetime-calendar__month__day--selected:hover > span > span {
+  background: #00d1b2;
+}
+
+.theme-primary .vdatetime-year-picker__item--selected,
+.theme-primary .vdatetime-time-picker__item--selected,
+.theme-primary .vdatetime-popup__actions__button {
+  color: #00d1b2;
+}
diff --git a/_v2/src/css/index.css b/_v2/src/css/index.css
diff --git a/_v2/src/css/jquery.datetimepicker.min.css b/_v2/src/css/jquery.datetimepicker.min.css
diff --git a/_v2/src/css/main.css b/_v2/src/css/main.css
@@ -0,0 +1,9 @@
+.table-container {
+  overflow: auto;
+}
+
+.table-container__actions-cell {
+  white-space: nowrap;
+}
+
+/* modifiers */
diff --git a/_v2/src/js/components/main-navbar.js b/_v2/src/js/components/main-navbar.js
@@ -0,0 +1,31 @@
+Vue.component('main-navbar', {
+  data: function () { return { isActive: false, } },
+  methods: {
+    toggleMenu: function () { this.isActive = !this.isActive; }
+  },
+  template: `
+    <div class="navbar has-shadow is-primary">
+      <div class="navbar-brand">
+        <a class="navbar-item" href="/_v2/">
+          <i class="fas fa-volleyball-ball fa-2x"></i>
+          &nbsp;&nbsp;
+          <b>Let's volleyball</b>
+        </a>
+
+        <div @click="toggleMenu" class="navbar-burger" v-bind:class="{ 'is-active': isActive }">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </div>
+      </div>
+
+      <div class="navbar-menu" v-bind:class="{ 'is-active': isActive }">
+        <div class="navbar-start">
+          <a class="navbar-item" href="/_v2/">Primary event</a>
+          <a class="navbar-item" href="/_v2/events.html">All events</a>
+          <a class="navbar-item" href="/_v2/shame.html">Hall of Shame</a>
+        </div>
+      </div>
+
+    </div>`,
+})
diff --git a/_v2/src/js/components/modal.js b/_v2/src/js/components/modal.js
@@ -0,0 +1,24 @@
+Vue.component('modal', {
+    data: function () { return { isActive: false, } },
+    props: [ 'title', 'name' ],
+    methods: {
+        open: function () { this.isActive = true; },
+        close: function () { this.isActive = false; },
+    },
+    template: `
+    <div class="modal" v-bind:class="{ 'is-active': isActive }" >
+        <div class="modal-background"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <p class="modal-card-title">{{ title }}</p>
+                <button class="delete" aria-label="close" @click="close()"></button>
+            </header>
+            <section class="modal-card-body">
+                <slot name="body"></slot>
+            </section>
+            <footer class="modal-card-foot">
+                <slot name="foot">
+            </footer>
+        </div>
+    </div>`,
+})