Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Revamp #5

Merged
merged 1 commit into from
Aug 10, 2018
Merged

UI Revamp #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
.DS_Store
vb.sqlite
52 changes: 52 additions & 0 deletions _v2/events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
53 changes: 53 additions & 0 deletions _v2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
40 changes: 40 additions & 0 deletions _v2/shame.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions _v2/src/css/bulma.min.css
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions _v2/src/css/components/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions _v2/src/css/components/vue-datetime.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions _v2/src/css/events.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Empty file added _v2/src/css/index.css
View file
Open in desktop
Empty file.
1 change: 1 addition & 0 deletions _v2/src/css/jquery.datetimepicker.min.css
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions _v2/src/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.table-container {
overflow: auto;
}

.table-container__actions-cell {
white-space: nowrap;
}

/* modifiers */
31 changes: 31 additions & 0 deletions _v2/src/js/components/main-navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>`,
})
24 changes: 24 additions & 0 deletions _v2/src/js/components/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>`,
})
Loading