FS-InfMath/Jobboerse
27
0
Fork 1
Code Issues 1 Pull requests Projects Releases 17 Wiki Activity

Redesign page + Webhook notifications #43

Merged
ldr merged 16 commits from facelift into main 2023-12-25 21:23:53 +01:00
Conversation 7 Commits 16 Files changed 42 +178 -79
6 changed files with 178 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 8d16ecda85 - Show all commits

Combine header and footer, apply new design to them

Prev Next 
- Change font to sans-serif or FreeSans, if available
- Add clickable link to student association homepage
- Add hover effect to links in header
- Add theme colors from our logo
- Add tilted border to header
Lukas Drescher 2023-12-23 03:16:18 +01:00
commit 8d16ecda85

178
packages/jobboerse/static/index.css
View file

@ -1,40 +1,122 @@
:root {
--header-footer-color: AliceBlue;
--filter-bar-color: Aquamarine;
font-family: "FreeSans", sans-serif;
--green: #87d38b;
--blue: #8ab9e7;
--yellow: #e9a12f;
--light-green: #c3e9c5;
--dark-green: #27682a;
--light-blue: #cce0f5;
--dark-blue: #1c5287;
--light-yellow: #f7deb6;
--dark-yellow: #a66d11;
--default-padding: calc((5 / 16) * 1rem)
}
.header, .footer, .header-banner {
.header, .header-inner, .header-banner {
display: flex;
background: var(--header-footer-color);
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: 5px;
box-shadow: 0px 0px 10px 0px gray;
}
.header-inner, .header-banner {
background: var(--light-green);
padding: var(--default-padding);
}
.header, .header-inner {
flex-direction: column;
}
.header::after {
content: "";
background-color: var(--light-green);
clip-path: polygon(100% 0%, 0% 0%, 0% 100%);
width: 100%;
height: min(5vh, 2.5rem);
}
.header h1 {
padding: var(--default-padding);
margin: 0;
}
a {
color: var(--dark-blue);
text-decoration: none;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.17rem;
}
.menu {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: baseline;
gap: var(--default-padding);
align-self: stretch;
}
.header-banner {
background: orange;
}
.header{
.header {
position: sticky;
top: 0;
left:0;
left: 0;
}
.footer {
position: sticky;
bottom: 0;
left:0;
.header-top {
align-self: stretch;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-element, .footer-element {
margin: 5px;
.header-top::after {
content: "";
}
.header-top img {
max-height: 2.5rem;
max-width: 10rem;
}
.header-element, .menu-item {
padding: var(--default-padding);
cursor: pointer;
}
.header-element {
color: black;
}
.menu-item {
background-color: #80808000;
transition: background-color 0.25s ease-in-out;
-webkit-transition: background-color 0.25s ease-in-out;
-moz-transition: background-color 0.25s ease-in-out;
-ms-transition: background-color 0.25s ease-in-out;
-o-transition: background-color 0.25s ease-in-out;
}
.menu-item:hover {
background-color: #80808080;
}
.inline {
display: inline-block;
}
@ -51,7 +133,7 @@ body main {
}
.header-main {
flex-grow:1;
flex-grow: 1;
}
.centered {
@ -76,9 +158,9 @@ body main {
display: grid;
grid-gap: 5px;
grid-template: [retry-msg] "m m"
[username] "ul ui"
[password] "pl pi"
[submit] "sb empty";
[username] "ul ui"
[password] "pl pi"
[submit] "sb empty";
padding: 5px;
border-style: solid;
border-color: gray;
@ -116,17 +198,17 @@ body main {
.submission-form {
display: grid;
grid-gap: 5px;
grid-template: [title] "tt tf"
[submitter] "st sf"
[contact] "ct cf"
[contact-public] "pt pc"
[expiry] "et es"
[attachments] "at at"
[links] "ln ln"
[notes] "nt nt"
[advanced] "ao ao"
[submit] "sb sb"
[footnote] "fn fn";
grid-template: [title] "tt tf"
[submitter] "st sf"
[contact] "ct cf"
[contact-public] "pt pc"
[expiry] "et es"
[attachments] "at at"
[links] "ln ln"
[notes] "nt nt"
[advanced] "ao ao"
[submit] "sb sb"
[footnote] "fn fn";
padding: 5px;
}
@ -233,7 +315,7 @@ body main {
}
.column, .submission-preview {
flex-direction:column
flex-direction: column
}
.link-button {
@ -262,36 +344,37 @@ body main {
display: inline-block;
}
.modal-confirm-box {
.modal-confirm-box {
display: inline-block;
border-style: solid;
border-radius: 5px;
}
input.modal-open-check:not(:checked) + .modal-confirm-box {
border-color: transparent;
input.modal-open-check:not(:checked)+.modal-confirm-box {
border-color: transparent;
}
.modal-confirm-box > .modal-open-button.confirm {
.modal-confirm-box>.modal-open-button.confirm {
background-color: lightgreen;
border-radius: 5px;
padding: 5px;
}
.modal-confirm-box > .modal-open-button.retract {
.modal-confirm-box>.modal-open-button.retract {
background-color: tomato;
border-radius: 5px;
padding: 5px;
}
input.modal-open-check:checked + .modal-confirm-box > .modal-open-button {
input.modal-open-check:checked+.modal-confirm-box>.modal-open-button {
display: none;
}
input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-cancel-button {
input.modal-open-check:not(:checked)+.modal-confirm-box>.modal-cancel-button {
display: none;
}
input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-submit-button {
input.modal-open-check:not(:checked)+.modal-confirm-box>.modal-submit-button {
visibility: hidden;
}
@ -307,14 +390,15 @@ input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-submit-button
display: none;
}
.hideable-toggle:checked ~ label.hideable-label::after {
.hideable-toggle:checked~label.hideable-label::after {
content: "Show";
}
.hideable-toggle:not(:checked) ~ label.hideable-label::after {
.hideable-toggle:not(:checked)~label.hideable-label::after {
content: "Hide";
}
:checked.hideable-toggle ~ .hideable-target {
:checked.hideable-toggle~.hideable-target {
display: none;
}
@ -323,17 +407,17 @@ input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-submit-button
display: flex;
align-items: center;
position: sticky;
background: var(--filter-bar-color);
background: var(--light-green);
top: 120px;
box-sizing: border-box;
left:0;
left: 0;
margin-bottom: 5px;
padding: 5px;
width: 100%;
box-shadow: 0px 0px 10px 0px gray;
}
.joboffer-filters > .filter-label[for="awaiting-review"] {
.joboffer-filters>.filter-label[for="awaiting-review"] {
border: solid;
padding: 5px;
border-color: gray;
@ -341,10 +425,10 @@ input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-submit-button
border-width: 2px;
}
#awaiting-review:checked ~ .joboffer-filters > .filter-label[for="awaiting-review"] {
#awaiting-review:checked~.joboffer-filters>.filter-label[for="awaiting-review"] {
background: cyan;
}
#awaiting-review:checked ~ .joboffer-index > .joboffer-index-entry:not(.AwaitingReview) {
#awaiting-review:checked~.joboffer-index>.joboffer-index-entry:not(.AwaitingReview) {
display: none;
}
}

1
packages/jobboerse/templates/base.hb
View file

@ -14,6 +14,5 @@
{{> @partial-block }}
</main>
</div>
{{> footer}}
</body>
</html>

26
packages/jobboerse/templates/footer.hb
View file

@ -1,26 +0,0 @@
<footer class="footer">
<nav class="footer-inner">
{{#each base.links as |link|}}
{{#unless @first}}<span>|</span>{{/unless}}<a class="footer-element" href="{{link.url}}"><h3 class="inline">{{link.title}}</h3></a>
{{/each}}
<span>|</span><a class="footer-element" href="{{base.routes.licenses}}"><h3 class="inline">Drittanbieter-Lizenzen</h3></a>
<span>|</span><a class="footer-element" href="{{base.routes.joboffer_create}}"><h3 class="inline">Stellenanzeige einreichen</h3></a>
{{#if user}}
<span>|</span><a class="footer-element" href="{{base.routes.joboffers_delete_expired}}" title="Alle abgelaufenen Stellenanzeigen löschen"><h3 class="inline">Abgelaufene löschen</h3></a>
<span>|</span><label class="footer-element" for="submit-sync" tabindex="0">
<h3 class="inline" title="Reload Joboffer Metadata from Disk">Re-Sync</h3>
<form class="hidden" method="post" action="{{base.routes.sync}}">
<input type="submit" id="submit-sync" class="hidden">
</form>
</label>
<span>|</span><label class="footer-element" for="submit-logout" tabindex="0">
<h3 class="inline">Abmelden</h3>
<form class="hidden" method="post" action="{{base.routes.logout}}">
<input type="submit" id="submit-logout" class="hidden">
</form>
</label
{{else}}
<span>|</span><a class="footer-element" href="{{base.routes.login}}"><h3 class="inline">Fachschaftler-Login</h3></a>
{{/if}}
</nav>
</footer>

11
packages/jobboerse/templates/header.hb
View file

@ -11,6 +11,15 @@
{{/if}}
<header class="header">
<nav class="header-inner">
<a class="header-element" href="{{base.routes.joboffer_overview}}"><h1>Jobbörse</h1></a>
<div class="header-top">
<a class="header-element" href="https://www.fs-infmath.uni-kiel.de/wiki/Hauptseite">
<img src="https://www.fs-infmath.uni-kiel.de/w/images/b/b6/Logo_gro%C3%9F_bunt.svg">
</a>
<a class="header-element" href="{{base.routes.index}}">
<h1>Jobbörse</h1>
</a>
</div>
{{> menu}}
</nav>
<div class="header-bottom"></div>
</header>

4
packages/jobboerse/templates/job_offer/faq.hb
View file

@ -8,7 +8,7 @@
<p>Die Aktuellen Semester- und Prüfungszeiträume sollten Sie <a href="https://www.uni-kiel.de/gf-praesidium/de/termine/semesterzeiten">hier</a> finden.</p>
<p class="italic-text">Bei technischen Problemen oder wenn Sie das Formular nicht nutzen können bzw. dürfen, senden Sie bitte eine E-Mail an <a href="jobs@fs-infmath.uni-kiel.de">jobs@fs-infmath.uni-kiel.de</a>. Wir helfen Ihnen gerne!</p>
<p class="italic-text">Bei technischen Problemen oder wenn Sie das Formular nicht nutzen können bzw. dürfen, senden Sie bitte eine E-Mail an <a href="{{mail}}">{{mail}}</a>. Wir helfen Ihnen gerne!</p>
</div>
<div>
@ -16,7 +16,7 @@
<p>Einreichungen werden automatisch entfernt, sobald das jeweilige Ablaufdatum verstrichen ist</p>
<p>Einreichungen ohne explizit angegebenes Ablaufdatum haben ein implizites Ablaufdatum 6 Monate (180 Tage) nach Einreichung.</p>
{{#if mail}}
<p>Um eine Einreichung früher zu entfernen, informieren Sie uns bitte per E-Mail unter <a href="{{mail}}">{{mail}}</a></p>
<p>Um eine Einreichung früher zu entfernen, informieren Sie uns bitte per E-Mail unter <a href="{{mail}}">{{mail}}</a>.</p>
{{/if}}
</div>

33
packages/jobboerse/templates/menu.hb Normal file
View file

@ -0,0 +1,33 @@
<nav class="menu">
{{#each base.links as |link|}}
<a class="menu-item" href="{{link.url}}">
<h3 class="inline">{{link.title}}</h3>
</a>
{{/each}}
<a class="menu-item" href="{{base.routes.licenses}}">
<h3 class="inline">Drittanbieter-Lizenzen</h3>
</a>
<a class="menu-item" href="{{base.routes.joboffer_create}}">
<h3 class="inline">Stellenanzeige einreichen</h3>
</a>
{{#if user}}
<a class="menu-item" href="{{base.routes.joboffers_delete_expired}}"
title="Alle abgelaufenen Stellenanzeigen löschen">
<h3 class="inline">Abgelaufene löschen</h3>
</a>
<label class="menu-item" for="submit-sync" tabindex="0">
<h3 class="inline" title="Reload Joboffer Metadata from Disk">Re-Sync</h3>
<form class="hidden" method="post" action="{{base.routes.sync}}">
<input type="submit" id="submit-sync" class="hidden">
</form>
</label>
<label class="menu-item" for="submit-logout" tabindex="0">
<h3 class="inline">Abmelden</h3>
<form class="hidden" method="post" action="{{base.routes.logout}}">
<input type="submit" id="submit-logout" class="hidden">
</form>
</label {{else}} <a class="menu-item" href="{{base.routes.login}}">
<h3 class="inline">Fachschaftler-Login</h3>
</a>
{{/if}}
</nav>