Commit 3e4f8c2a authored by onny's avatar onny
Browse files

clean up css and menu styling

parent 4cd716f5
......@@ -25,9 +25,7 @@ content {
}
header {
border-bottom: 1px solid;
border-color: #d6d6d6;
border-bottom: 1px solid #d6d6d6;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
......@@ -38,60 +36,47 @@ header > div {
margin: -1px auto -1px auto;
width: 80%;
height: 70px;
display: flex;
align-items: center;
border: 1px solid;
border-color: #d6d6d6;
}
.logo {
height:100%;
.menuItem {
height: 100%;
display:flex;
justify-content:center;
align-items: center;
border-left: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
cursor: pointer;
padding: 0px 30px;
}
padding: 10px 30px;
border-right: 1px solid;
border-color: #d6d6d6;
.menuItem > * {
pointer-events: none;
}
cursor: pointer;
.menuItem:nth-child(n+2) {
margin-left:-1px;
}
.search {
height:100%;
display:flex;
justify-content: flex-end;
align-items: center;
padding: 0px 30px;
border-right: 1px solid;
border-color: #d6d6d6;
flex: 1;
cursor: pointer;
}
.search .noBorder {
border-left: 0px;
}
.search .fa-times {
pointer-events: all;
}
.icon-search {
height: 100%;
border-left: 1px solid;
border-color: #d6d6d6;
border-left: 1px solid #d6d6d6;
padding-left: 30px;
}
.searchBox {
width: 100%;
border: none;
outline: none;
font-size: 14px;
}
.searchArea {
width: 100%;
border-bottom: 1px solid rgb(0, 99, 161);
......@@ -103,30 +88,15 @@ header > div {
display: none;
}
.searchArea .fa-search {
font-size: 16px;
}
.lang {
height: 100%;
display:flex;
justify-content:center;
align-items: center;
padding: 0 25px;
border-right: 1px solid;
border-color: #d6d6d6;
cursor: pointer;
.searchArea .searchBox {
width: 100%;
border: none;
outline: none;
font-size: 14px;
}
.login {
height: 100%;
display:flex;
justify-content:center;
align-items: center;
padding: 0px 25px;
cursor: pointer;
.searchArea .fa-search {
font-size: 16px;
}
.loginOverlay {
......
......@@ -107,22 +107,22 @@ var demo = new Vue({
mounted: function()
{
switch (window.location.pathname) {
case "/artists/":
case "/de/artists":
axios
.get('/api/artist/')
.then(response => (this.entries = response.data));
break;
case "/projects/":
case "/de/projects/":
axios
.get('/api/project/')
.then(response => (this.entries = response.data));
break;
case "/entries/":
case "/de/entries/":
axios
.get('/api/entry/')
.then(response => (this.entries = response.data));
break;
case "/media/":
case "/de/media/":
axios
.get('/api/media/')
.then(response => (this.entries = response.data));
......
document.addEventListener("DOMContentLoaded", function() {
window.onclick = function(event) {
console.log(event.target);
if (event.target.closest('.search') || event.target.closest('.fa-search-big')) {
if (event.target.matches('.search')) {
document.getElementsByClassName("searchArea")[0].classList.add("showFlex");
document.getElementsByClassName("search")[0].classList.add("active");
document.getElementsByClassName("icon-search")[0].classList.add("noBorder");
document.getElementsByClassName("searchBox")[0].focus();
searchIcon = document.getElementsByClassName('fa-search-big')[0];
searchIcon.classList.remove('fa-search');
searchIcon.classList.add('fa-times');
};
if (! event.target.closest('.search') || event.target.closest('.fa-times')) {
if (!event.target.matches('.search') || event.target.matches('.fa-times')) {
searchArea = document.getElementsByClassName("searchArea")[0];
searchArea.classList.remove('showFlex');
searchBtn = document.getElementsByClassName("search")[0];
......@@ -25,10 +25,9 @@ document.addEventListener("DOMContentLoaded", function() {
searchIcon.classList.add('fa-search');
};
if (event.target.closest('.lang')) {
if (event.target.matches('.lang')) {
document.getElementById("menu-lang").classList.toggle("show");
document.getElementsByClassName("lang")[0].classList.toggle("active");
arrowIcon = document.getElementsByClassName('fa-chevron-down')[0];
if (arrowIcon) {
arrowIcon.classList.remove('fa-chevron-down');
......@@ -38,13 +37,11 @@ document.addEventListener("DOMContentLoaded", function() {
arrowIcon.classList.remove('fa-chevron-up');
arrowIcon.classList.add('fa-chevron-down');
}
} else {
langBtn = document.getElementsByClassName("lang")[0];
if (langBtn.classList.contains('active')) {
langBtn.classList.remove('active');
};
var dropdowns = document.getElementsByClassName("dropdown-lang");
var i;
for (i = 0; i < dropdowns.length; i++) {
......@@ -53,7 +50,6 @@ document.addEventListener("DOMContentLoaded", function() {
openDropdown.classList.remove('show');
}
}
arrowIcon = document.getElementsByClassName('fa-chevron-up')[0];
if (arrowIcon) {
arrowIcon.classList.remove('fa-chevron-up');
......@@ -61,10 +57,7 @@ document.addEventListener("DOMContentLoaded", function() {
};
};
if (event.target.closest('.login')) {
console.log("login clicked");
if (event.target.matches('.login')) {
menuProfile = document.getElementById("menu-profile")
if (menuProfile) {
menuProfile.classList.toggle("show");
......@@ -72,13 +65,11 @@ document.addEventListener("DOMContentLoaded", function() {
} else {
document.getElementsByClassName("loginOverlay")[0].classList.toggle("showFlex");
};
} else {
loginBtn = document.getElementsByClassName("login")[0];
if (loginBtn.classList.contains('active')) {
loginBtn.classList.remove('active');
};
var dropdowns = document.getElementsByClassName("dropdown-login");
var i;
for (i = 0; i < dropdowns.length; i++) {
......
{% extends 'base.html' %}
{% block content %}
<h2>{{ artist }}</h2>
<div class="flex-container">
<p v-if="artist.length == 0">Sorry, no jobs currently available</p>
<div v-for="(artist, index) in artist" class="artist">
<div class="col-sm-12">
<img src="https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg" width=100px>
<br><b><a :href="'/' + artist.slug">[[ artist.name ]]</a></b><br>
<button class="btn" v-on:click="removeArtist([[ index ]])">Delete</button>
</div>
</div>
</div>
{% endblock %}
......@@ -16,14 +16,14 @@
<content id="app">
<header>
<div>
<div class='logo'>
<div class='logo menuItem'>
<div>
<b><a href="/">[[ apptitle ]]</a></b>
<br>
<small>Tech demo 0.1</small>
</div>
</div>
<div class='search'>
<div class='search menuItem'>
<div class='searchArea'>
<input class='searchBox' type='text' placeholder="{% trans "Search" %}">
<i class="fa fa-search"></i>
......@@ -32,7 +32,7 @@
<i class="fa fa-search fa-search-big"></i>
</span>
</div>
<div class='lang'>
<div class='lang menuItem'>
<span class='icon'>
<div class="dropdown">
<i class="fa fa-chevron-down fa-margin"></i>
......@@ -49,7 +49,7 @@
</div>
</span>
</div>
<div class='login'>
<div class='login menuItem'>
<span class='icon'>
{% if authenticated %}
<div class="dropdown">
......
{% extends 'base.html' %}
{% block content %}
<h2>Media</h2>
<div class="flex-container">
<p v-if="entries.length == 0">Sorry, no entires currently available</p>
<div v-for="(entry, index) in entries">
<div class='imgbox'
style='background-image: url("https://uploads.wikiart.org/Content/images/ARTIST-480x600.jpg");'>
</div>
<b>[[ entry.file ]]</b><br>
of [[ entry.id ]]<br>
{% if authenticated %}
<button v-on:click="removeEntry('media', [[ index ]])">Delete</button>
<button v-on:click="editEntry([[ index ]])">Edit</button>
{% endif %}
</div>
</div>
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment