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 +80 -48
4 changed files with 80 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 4a5a0a2d4b - Show all commits

Apply new design to the rest of the website

Prev Next 
- Change students' association logo to the version with the university name
- translate the login screen to german
- fix a typo on the job offer creation screen
- update CSS
Lukas Drescher 2023-12-23 22:58:47 +01:00
commit 4a5a0a2d4b

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

@ -69,6 +69,10 @@ h3 {
align-self: stretch; align-self: stretch;
} }
.menu a {
color: black;
}
.header-banner { .header-banner {
background: orange; background: orange;
} }
@ -129,7 +133,7 @@ body {
} }
body main { body main {
margin: 10px; margin: calc(2 * var(--default-padding));
} }
.header-main { .header-main {
@ -156,16 +160,17 @@ body main {
.login-form { .login-form {
display: grid; display: grid;
grid-gap: 5px; grid-gap: var(--default-padding);
grid-template: [retry-msg] "m m" grid-template: [retry-msg] "m m"[username] "ul ui"[password] "pl pi"[submit] "sb empty";
[username] "ul ui" padding: var(--default-padding);
[password] "pl pi"
[submit] "sb empty";
padding: 5px;
border-style: solid; border-style: solid;
border-color: gray; border-color: var(--blue);
border-radius: 20px; border-width: var(--default-padding);
border-width: 2px; border-radius: var(--default-padding);
-webkit-border-radius: var(--default-padding);
-moz-border-radius: var(--default-padding);
-ms-border-radius: var(--default-padding);
-o-border-radius: var(--default-padding);
} }
@ -209,7 +214,7 @@ body main {
[advanced] "ao ao" [advanced] "ao ao"
[submit] "sb sb" [submit] "sb sb"
[footnote] "fn fn"; [footnote] "fn fn";
padding: 5px; padding: var(--default-padding);
} }
.advanced-options { .advanced-options {
@ -293,39 +298,52 @@ body main {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
grid-gap: 5px; grid-gap: var(--default-padding);
} }
.joboffer-index-entry { .joboffer-index-entry {
width: 25em; width: 25rem;
margin: 5px; margin: var(--default-padding);
padding: 5px; padding: var(--default-padding);
border-style: solid; border-style: solid;
border-color: gray; border-color: var(--green);
border-radius: 20px; border-width: var(--default-padding);
border-width: 2px; border-radius: var(--default-padding);
-webkit-border-radius: var(--default-padding);
-moz-border-radius: var(--default-padding);
-ms-border-radius: var(--default-padding);
-o-border-radius: var(--default-padding);
} }
.joboffer-index-entry.AwaitingReview, .joboffer-index-entry.UnPublished { .joboffer-index-entry.AwaitingReview, .joboffer-index-entry.UnPublished {
background: pink; background: var(--light-yellow);
border-style: dashed;
border-color: var(--yellow);
} }
.joboffer-index-entry:target { .joboffer-index-entry:target {
background: LemonChiffon; background: var(--light-green);
border-color: var(--dark-green);
} }
.column, .submission-preview { .column, .submission-preview {
flex-direction: column flex-direction: column;
gap: var(--default-padding);
} }
.link-button { .link-button {
margin: 5px; margin: var(--default-padding);
border: solid; border: solid;
border-radius: 10px; color: white;
border-color: black; padding: var(--default-padding);
color: black;
padding: 5px;
text-decoration: none; text-decoration: none;
background-color: var(--dark-blue);
border-color: var(--blue);
border-radius: var(--default-padding);
-webkit-border-radius: var(--default-padding);
-moz-border-radius: var(--default-padding);
-ms-border-radius: var(--default-padding);
-o-border-radius: var(--default-padding);
} }
.expired, .unconfirmed, .unreviewed { .expired, .unconfirmed, .unreviewed {
@ -347,7 +365,12 @@ body main {
.modal-confirm-box { .modal-confirm-box {
display: inline-block; display: inline-block;
border-style: solid; border-style: solid;
border-radius: 5px; border-color: var(--dark-blue);
border-radius: var(--default-padding);
-webkit-border-radius: var(--default-padding);
-moz-border-radius: var(--default-padding);
-ms-border-radius: var(--default-padding);
-o-border-radius: var(--default-padding);
} }
input.modal-open-check:not(:checked)+.modal-confirm-box { input.modal-open-check:not(:checked)+.modal-confirm-box {
@ -355,15 +378,23 @@ input.modal-open-check:not(:checked)+.modal-confirm-box {
} }
.modal-confirm-box>.modal-open-button.confirm { .modal-confirm-box>.modal-open-button.confirm {
background-color: lightgreen; background-color: var(--green);
border-radius: 5px; padding: var(--default-padding);
padding: 5px; border-radius: var(--default-padding);
-webkit-border-radius: var(--default-padding);
-moz-border-radius: var(--default-padding);
-ms-border-radius: var(--default-padding);
-o-border-radius: var(--default-padding);
} }
.modal-confirm-box>.modal-open-button.retract { .modal-confirm-box>.modal-open-button.retract {
background-color: tomato; background-color: var(--yellow);
border-radius: 5px; padding: var(--default-padding);
padding: 5px; border-radius: var(--default-padding);
-webkit-border-radius: var(--default-padding);
-moz-border-radius: var(--default-padding);
-ms-border-radius: var(--default-padding);
-o-border-radius: var(--default-padding);
} }
input.modal-open-check:checked+.modal-confirm-box>.modal-open-button { input.modal-open-check:checked+.modal-confirm-box>.modal-open-button {
@ -407,26 +438,27 @@ input.modal-open-check:not(:checked)+.modal-confirm-box>.modal-submit-button {
display: flex; display: flex;
align-items: center; align-items: center;
position: sticky; position: sticky;
background: var(--light-green); top: 8rem;
top: 120px;
box-sizing: border-box; box-sizing: border-box;
left: 0; left: 0;
margin-bottom: 5px; background: white;
padding: 5px; margin-bottom: var(--default-padding);
width: 100%; padding: var(--default-padding);
box-shadow: 0px 0px 10px 0px gray; border: var(--default-padding) solid var(--blue);
width: fit-content;
} }
.joboffer-filters>.filter-label[for="awaiting-review"] { .joboffer-filters>.filter-label[for="awaiting-review"] {
margin-left: var(--default-padding);
border: solid; border: solid;
padding: 5px; padding: var(--default-padding);
border-color: gray; border-color: var(--yellow);
border-radius: 20px; border-radius: 20px;
border-width: 2px; border-width: var(--default-padding);
} }
#awaiting-review:checked~.joboffer-filters>.filter-label[for="awaiting-review"] { #awaiting-review:checked~.joboffer-filters>.filter-label[for="awaiting-review"] {
background: cyan; background: var(--light-yellow);
} }
#awaiting-review:checked~.joboffer-index>.joboffer-index-entry:not(.AwaitingReview) { #awaiting-review:checked~.joboffer-index>.joboffer-index-entry:not(.AwaitingReview) {

6
packages/jobboerse/templates/auth/login.hb
View file

@ -6,9 +6,9 @@
<div class="message">Username or Password incorrect!</div> <div class="message">Username or Password incorrect!</div>
{{/if}} {{/if}}
<label class="username-label" for="login-username">Username</label> <input id="login-username" class="username-input" type="text" name="username" autocomplete="username" required> <label class="username-label" for="login-username">Benutzername</label> <input id="login-username" class="username-input" type="text" name="username" autocomplete="username" required>
<label class="password-label" for="login-password">Password</label> <input id="login-password" class="password-input" type="password" name="password" autocomplete="current-password" required><br /> <label class="password-label" for="login-password">Passwort</label> <input id="login-password" class="password-input" type="password" name="password" autocomplete="current-password" required><br />
<button class="submit-button" type="submit">Login</button> <button class="submit-button" type="submit">Anmelden</button>
</form> </form>
</div> </div>
{{/base}} {{/base}}

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

@ -13,7 +13,7 @@
<nav class="header-inner"> <nav class="header-inner">
<div class="header-top"> <div class="header-top">
<a class="header-element" href="https://www.fs-infmath.uni-kiel.de/wiki/Hauptseite"> <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"> <img src="https://www.fs-infmath.uni-kiel.de/w/images/9/9f/Logo_gro%C3%9F_bunt_kiel.svg">
</a> </a>
<a class="header-element" href="{{base.routes.index}}"> <a class="header-element" href="{{base.routes.index}}">
<h1>Jobbörse</h1> <h1>Jobbörse</h1>

2
packages/jobboerse/templates/job_offer/create.hb
View file

@ -57,7 +57,7 @@
<label class="backdate-title" for="offer-backdate">Eingangsdatum (optionale Rückdatierung)</label> <label class="backdate-title" for="offer-backdate">Eingangsdatum (optionale Rückdatierung)</label>
<input class="backdate-select" id="offer-backdate" type="datetime-local" name="backdate"><br /> <input class="backdate-select" id="offer-backdate" type="datetime-local" name="backdate"><br />
<label class="review-title" for="approval"checked>Als bereits ge-reviwed markieren</label> <label class="review-title" for="approval"checked>Als bereits ge-reviewed markieren</label>
<input id="approval" class="review-checkbox" type="checkbox" name="pre_approved" value="approved" checked><br /> <input id="approval" class="review-checkbox" type="checkbox" name="pre_approved" value="approved" checked><br />
<label class="review-title" for="confirmation">Bestätigungsmail für diese Anzeige überspringen</label> <label class="review-title" for="confirmation">Bestätigungsmail für diese Anzeige überspringen</label>