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

Jump to bottom

Hackathon2017/improvements #10

Merged
merged 26 commits into from Oct 8, 2017
Merged

Hackathon2017/improvements #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
e91c1b5
Added new rendered png logos.
IAmNotHanni Oct 7, 2017
d266bf5
Improved navbar items layout.
IAmNotHanni Oct 7, 2017
b569cb6
Added border-top to navbar.
IAmNotHanni Oct 7, 2017
a90c430
Fixed background image stretching when scrollbar appears.
IAmNotHanni Oct 7, 2017
63c6f5d
Adjusted background colors.
IAmNotHanni Oct 7, 2017
1450911
Removed "Stays Sauer, becomes better" headline.
IAmNotHanni Oct 7, 2017
f6003e8
Improved home page.
IAmNotHanni Oct 7, 2017
9b5e68e
Lowered background image rotation down to 5 seconds.
IAmNotHanni Oct 7, 2017
2fbd7a3
Redesigned home page.
IAmNotHanni Oct 7, 2017
4c35088
Added more text shadow.
IAmNotHanni Oct 7, 2017
4adcef0
Fixed margin issues with blog site.
IAmNotHanni Oct 7, 2017
d872370
Improved blog site layout.
IAmNotHanni Oct 7, 2017
662201b
Sharpened background images.
IAmNotHanni Oct 7, 2017
8c36b3a
Use blurred background images.
IAmNotHanni Oct 7, 2017
95ed87e
Small border design improvements.
IAmNotHanni Oct 7, 2017
c7c6ed4
"create" not "craft".
IAmNotHanni Oct 7, 2017
ef14888
Added media queries for responsive design.
IAmNotHanni Oct 7, 2017
c94b5f4
sanitizer replaced hanni's footer workaround and fixed footer and res…
IAmNotHanni Oct 7, 2017
35567de
Added a download page.
IAmNotHanni Oct 7, 2017
9d6cb3e
Improved blog page layout.
IAmNotHanni Oct 8, 2017
0d8a65f
Improved logo for missing macOS support.
IAmNotHanni Oct 8, 2017
91110f5
decreased download icon size from 200 to 150px.
IAmNotHanni Oct 8, 2017
75fdc62
Use correct CSS selector operators for blog page.
IAmNotHanni Oct 8, 2017
77c6535
Added source code link to download page.
IAmNotHanni Oct 8, 2017
c4341b6
Removed "Want to do it yourself?"
IAmNotHanni Oct 8, 2017
5b83ac8
Improved download page.
IAmNotHanni Oct 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
126 changes: 73 additions & 53 deletions src/App.vue
View file
Open in desktop
Expand Up @@ -3,28 +3,33 @@
<div class="site-wrapper-inner">
<div class="cover-container">

<transition name="fade" mode="in-out">
<div class="inexor_bg" v-if="!toggle_bg" v-bind:style='bg_1' key="1">
</div>
<div class="inexor_bg" v-else v-bind:style='bg_2' key="2">
</div>
</transition>
<header>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top navbar-expand-xl">
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item"><router-link class="nav-link" to="/home">Home</router-link></li>
<li class="nav-item"><router-link class="nav-link" to="/blog">Blog</router-link></li>
<li class="nav-item"><a href="https://github.com/inexorgame/code/wiki" class="nav-link">Wiki</a></li> <!-- We need to change that to a way to get the wiki directly from the website-->
<li class="nav-item"><router-link class="nav-link" to="/people">People</router-link></li>
</ul>
</div>
</nav>
</header>
<div class="inner cover">
<router-view></router-view>
</div>
<transition name="fade" mode="in-out">
<div class="inexor_bg" v-if="!toggle_bg" v-bind:style='bg_1' key="1">
</div>
<div class="inexor_bg" v-else v-bind:style='bg_2' key="2">
</div>
</transition>

<nav class="navbar navbar-expand-md navbar-inverse fixed-top navbar-expand-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
&#9776;
</button>

<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav">
<li class="nav-item"><router-link class="nav-link" to="/home">Home</router-link></li>
<li class="nav-item"><router-link class="nav-link" to="/download">Download</router-link></li>
<li class="nav-item"><router-link class="nav-link" to="/blog">Blog</router-link></li>
<li class="nav-item"><router-link class="nav-link" to="/people">People</router-link></li>
<li class="nav-item"><a href="https://github.com/inexorgame/code/wiki" target="_blank" class="nav-link">Wiki</a></li> <!-- We need to change that to a way to get the wiki directly from the website-->
</ul>
</div>
</nav>
</div>

<router-view></router-view>

<div class="cover-container">
<footer>
<div class="container">
<div class="row">
Expand Down Expand Up @@ -81,25 +86,29 @@ body {
}

body {
overflow-y:scroll;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
background-color: #111;
}

/*
* Inexor classes
*/

.inexor_bg {
position: fixed;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
top: 0;
left: 0;
bottom: 0;
z-index:-1;
position: fixed;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
top: 0;
left: 0;
bottom: 0;
z-index:-1;
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
Expand Down Expand Up @@ -129,30 +138,36 @@ body {
* Header
*/

.navbar {
padding: 1rem 1rem 1rem 1rem;
right:0;
top: 0;

background-color: rgba(11, 11, 11, 0.5);
.navbar-toggler {
color: #FFF;
width: 100%;
padding: 10px
}

@media (max-width: 600px) {

.navbar {
padding:0;
border-top:solid 5px rgba(0, 0, 0, 0.7);
}

.navbar-nav > li> a {
padding-bottom: 0;
border-bottom: thick solid rgba(255,255,255, 0);
@media (max-width: 767px) {
.navbar {
border-top: none;
background: rgba(0, 0, 0, 0.7);
}
}
.navbar-nav > li > a:hover {
border-bottom: thick solid rgba(255,255,255, 0.5);
transition: border-bottom, 0.2s;

.navbar-nav > li > a {
line-height:60px;
padding:0 10px 0 10px;
min-width:100px;
}

.navbar-nav > li > a:hover,
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
border-bottom: thick solid rgba(255,255,255, 0.5);
height:60px;
background-color:rgba(0, 0, 0, 0.7);
}

/*
Expand All @@ -162,6 +177,9 @@ body {
.cover {
padding: 8rem 20px;
}
.cover-top {
padding: 8rem 20px 0 20px;
}

.cover .btn-lg {
padding: 10px 20px;
Expand Down Expand Up @@ -225,8 +243,10 @@ footer a:hover {
*/

.card {
margin: 10%;
background-color:rgba(50, 50, 50, 0.8);
border:rgba(255,255,255,0.5) 1px solid;
margin: 10% 10% 10% 0px;
padding:10px;
background-color:rgba(0,0,0,0.7);
border-radius: 5px;
}

Expand Down Expand Up @@ -256,15 +276,15 @@ export default {
toggle_bg: true,

bg_1: {
'background-image': "url('/src/assets/background/laucin.jpg')"
'background-image': "url('/src/assets/background_blur/laucin.jpg')"
},
bg_2: {
},

i: 0,
bg_images: [
"laucin.jpg",
"dust6.jpg",
"laucin.jpg",
"haze.jpg",
"averas.jpg",
"cartel.jpg",
Expand All @@ -290,7 +310,7 @@ export default {
methods: {
loopThroughBackgroundImages: function loopThroughBackgroundImages() {
let vm = this;
vm.$set( ( vm.toggle_bg ? vm.bg_1: vm.bg_2 ), 'background-image', 'url(/src/assets/background/' + vm.bg_images[vm.i] + ')' ) ;
vm.$set( ( vm.toggle_bg ? vm.bg_1: vm.bg_2 ), 'background-image', 'url(/src/assets/background_blur/' + vm.bg_images[vm.i] + ')' ) ;
vm.toggle_bg = !vm.toggle_bg;

vm.i++;
Expand All @@ -305,7 +325,7 @@ export default {

next_img.onload = function() {
let t1 = performance.now()
setTimeout(vm.loopThroughBackgroundImages, Math.max(0, 10000 - (t1 - t0)) );
// setTimeout(vm.loopThroughBackgroundImages, Math.max(0, 5000 - (t1 - t0)) );
}
},
}
Expand Down
100 changes: 62 additions & 38 deletions src/Blog.vue
View file
Open in desktop
@@ -1,48 +1,50 @@
<template>
<div class="container">
<div class="row">
<div class="col-12">
<form class="form-inline">

<label for="date" class="sr-only">Sort by date</label>
<select type="select" name="date" class="form-control mb-2 mr-sm-2 mb-sm-0" v-on:change="sortPosts(order)" v-model="order">
<option value="desc" selected>Descending</option>
<option value="asc">Ascending</option>
</select>

<input v-validate="'required|min:4'" name="search" class="form-control mb-2 mr-sm-2 mb-sm-0" type="text" v-bind:class="{ 'has-warning': errors.has('search') }" v-model="query" placeholder="Search" @keydown.enter.prevent="filterBlogEntries(order)">
<button class="btn btn-outline-success mb-2 mr-sm-2 mb-sm-0" v-bind:disabled="errors.has('search')" v-on:click="filterBlogEntries" type="button">Search</button>
</form>
</div>
</div>
<div class="inner cover">
<div class="container">
<div class="row">
<div class="col-12">
<form class="form-inline">

<div class="row">
<div v-if="notfound" class="col-12">
<div class="card card-block">
<div class="card-title">
<h4>We couldn't find the article you are looking for..</h4>
</div>
<div class="card-text">
<img src="/src/assets/sitting_ogro.jpg" style="border-radius: 5px;"/>
<label for="date" class="sr-only">Sort by date</label>
<select id="inexor_select_sort_order" type="select" name="date" class="inexor_search_style form-control mb-2 mr-sm-2 mb-sm-0" v-on:change="sortPosts(order)" v-model="order">
<option value="desc" selected>Descending</option>
<option value="asc">Ascending</option>
</select>

<input id="inexor_search_bar" v-validate="'required|min:4'" name="search" class="inexor_search_style form-control mb-2 mr-sm-2 mb-sm-0" type="text" v-bind:class="{ 'has-warning': errors.has('search') }" v-model="query" placeholder="Search" @keydown.enter.prevent="filterBlogEntries(order)">
<button id="inexor_search_button" class="inexor_search_style btn btn-outline-success mb-2 mr-sm-2 mb-sm-0" v-bind:disabled="errors.has('search')" v-on:click="filterBlogEntries" type="button">Search</button>
</form>
</div>
</div>

<div class="row">
<div v-if="notfound" class="col-12">
<div class="card card-block">
<div class="card-title">
<h4>We couldn't find the article you are looking for..</h4>
</div>
<div class="card-text">
<img src="/src/assets/sitting_ogro.jpg" style="border-radius: 5px;"/>
</div>
</div>
</div>
</div>
<div v-else v-for="post in filteredPosts" class="col-lg-4 col-md-6">
<div class="card blog-card">
<div class="card-block">
<h4 class="card-title">{{ post.display_name }}</h4>
<p class="card-text text-muted">written on {{ post.day }}.{{ post.month }}.{{ post.year }}</p>
<router-link :to="post.post_path">Read more</router-link>
<div v-else v-for="post in filteredPosts" class="col-lg-4 col-md-6">
<div class="card blog-card">
<div class="card-block">
<h4 class="card-title">{{ post.display_name }}</h4>
<p class="card-text text-muted">written on {{ post.day }}.{{ post.month }}.{{ post.year }}</p>
<router-link :to="post.post_path">Read more</router-link>
</div>
</div>
</div>
</div>
<div class="loading" v-if="loading">
<h4>Writing interesting articles...</h4>
</div>
<div class="loading" v-if="loading">
<h4>Writing interesting articles...</h4>
</div>

<div v-if="error">
<h4>Something went wrong</h4>
<p class="text-muted">{{ error }}</p>
<div v-if="error">
<h4>Something went wrong</h4>
<p class="text-muted">{{ error }}</p>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -183,6 +185,28 @@ export default {

<style>

.loading {
padding:15px;
}

.inexor_search_style {
background: rgba(0,0,0,0.7);
color: white;
border:rgba(255,255,255,0.5) 1px solid;
}

#inexor_select_sort_order {
padding:0px;
width:120px;
}

#inexor_search_bar {
width:300px;
}

#inexor_search_button {
}

.blog-card {
height: 10rem;
}
Expand Down