template update for nominate
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
Binary file not shown.
|
After Width: | Height: | Size: 451 B |
Binary file not shown.
|
After Width: | Height: | Size: 458 B |
@@ -6,7 +6,7 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.window:not([role="tabpanel"]) {
|
#main-window {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index:99;
|
z-index:99;
|
||||||
min-height: 520px;
|
min-height: 520px;
|
||||||
@@ -17,6 +17,53 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#main-window {
|
||||||
|
margin: 0;
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window.popup {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
top: calc(50% - 75px);
|
||||||
|
left: calc(50% - 150px);
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window.popup .window-body {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
}
|
||||||
|
.window.popup .window-body .text {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.window.popup .window-body .icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
padding: 16px;
|
||||||
|
background-position: center center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url('img/check.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.window.popup .window-body .icon.error {
|
||||||
|
background-image: url('img/error.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
.window.popup .window-body .icon.warning {
|
||||||
|
background-image: url('img/warning.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
@@ -29,6 +76,7 @@ body {
|
|||||||
.window {
|
.window {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
max-width:calc(100% - 5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.window.hide {
|
.window.hide {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
||||||
<div class="window" id="main-window">
|
<div class="window" id="main-window">
|
||||||
<div class="title-bar">
|
<div class="title-bar main-title-bar">
|
||||||
<div class="title-bar-text">
|
<div class="title-bar-text">
|
||||||
{% block window-title %}{% endblock %}
|
{% block window-title %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
{% block clippy %}{% endblock %}
|
{% block clippy %}{% endblock %}
|
||||||
<script>
|
<script>
|
||||||
position.get_pos(); // Gets position from localStorage
|
position.get_pos(); // Gets position from localStorage
|
||||||
interact('.title-bar').draggable({
|
interact('.main-title-bar').draggable({
|
||||||
listeners: {
|
listeners: {
|
||||||
move (event) {
|
move (event) {
|
||||||
position.x += event.dx
|
position.x += event.dx
|
||||||
|
|||||||
@@ -5,16 +5,38 @@ Nomineren
|
|||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block main-content %}
|
{% block main-content %}
|
||||||
{% if warning %}
|
|
||||||
<div class="info warning">{{nominated}}: {{warning}}</div>
|
|
||||||
{% elif error %}
|
|
||||||
<div class="info error">{{nominated}}: {{error}}</div>
|
|
||||||
{% elif nominated %}
|
|
||||||
<div class="info">{{nominated}} Genomineerd!</div>
|
|
||||||
{% endif %}
|
|
||||||
<form method="post">
|
<form method="post">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<input type="text" name="spotify_link" placeholder="Spotify-link">
|
<input type="text" name="spotify_link" placeholder="Spotify-link">
|
||||||
<input type="submit" value="OK">
|
<input type="submit" value="OK">
|
||||||
</form>
|
</form>
|
||||||
|
{% if nominated %}
|
||||||
|
<script>
|
||||||
|
function hidePopup() {
|
||||||
|
console.log("je moeder")
|
||||||
|
document.getElementById("info-window").classList.add("hide");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div class="window popup" id="info-window">
|
||||||
|
<div class="title-bar">
|
||||||
|
<div class="title-bar-text">{{nominated}}</div>
|
||||||
|
<div class="title-bar-controls">
|
||||||
|
<button aria-label="Close" onclick="hidePopup()"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="window-body">
|
||||||
|
<div class="icon {% if warning %}warning{% elif error %}error{% endif %}"></div>
|
||||||
|
<div class="text">
|
||||||
|
<div>
|
||||||
|
{{warning}}
|
||||||
|
{{error}}
|
||||||
|
{% if not warning and not error %}Genomineerd!{% endif %}
|
||||||
|
</div>
|
||||||
|
<section class="field-row" style="justify-content: flex-end">
|
||||||
|
<button onclick="hidePopup()">Ok</button>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user