christoph/lecture-professional-software-development
1
Fork 0
Code Activity

refined css

Browse Source
This commit is contained in:
Christoph
2020-04-11 10:16:40 +02:00
parent bda952a308
commit fec54ccd9c
11 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/main/resources/static/create.css
View File

0
src/main/resources/static/error.css
View File

21
src/main/resources/static/index.css
View File

@ -1,40 +1,31 @@
/*Grouplist Hover Effect*/ /*Grouplist Hover Effect*/
.content { .content {
padding-right: 20px;
background: #e6f4ff; background: #e6f4ff;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
transition: 100ms;
} }
.content:hover { .content:hover {
padding-right: 10px;
background: #d4ecff; background: #d4ecff;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
} }
.content-heading {
transition: 100ms;
}
.content:hover .content-heading { .content:hover .content-heading {
margin-left: 5px;
padding-bottom: 10px; padding-bottom: 10px;
padding-left: 10px;
} }
.content-text-in { .content-text-in {
margin-right: 10px;
box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .075); box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .075);
transition: 100ms;
} }
.content:hover .content-text-in { .content:hover .content-text-in {
margin-right: 0;
box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .25); box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .25);
} }
.float-right { /*Badges*/
margin-right: 10px; .badge-pill {
margin-left: 10px; margin-left: 10px;
} align-self: flex-end;
.content:hover .float-right {
margin-right: 0;
} }

13
src/main/resources/static/search.css
View File

@ -1,9 +1,9 @@
.top { /*Grouplist*/
.content.top {
padding: 10px 10px !important; padding: 10px 10px !important;
margin-bottom: 15px !important; margin-bottom: 15px !important;
} }
/*Grouplist Hover Effect*/
.content { .content {
margin-top: 5px; margin-top: 5px;
padding: 5px 5px; padding: 5px 5px;
@ -11,10 +11,17 @@
.content-heading { .content-heading {
margin-bottom: 5px; margin-bottom: 5px;
transition: 100ms;
} }
.content-text-in { .content-text-in {
box-shadow: none;
margin-bottom: 0; margin-bottom: 0;
padding: 5px; padding: 5px;
} }
/*Badges*/
.badge-pill {
align-self: flex-start;
margin-top: 2px;
margin-right: 5px;
}

40
src/main/resources/static/style.css
View File

@ -15,6 +15,7 @@
padding: 10px 10px; padding: 10px 10px;
margin-top: 15px; margin-top: 15px;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
transition: 100ms;
} }
/*Content Heading*/ /*Content Heading*/
@ -23,14 +24,22 @@
font-weight: bold; font-weight: bold;
font-optical-sizing: auto; font-optical-sizing: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
transition: 100ms;
} }
.content-text { .content-heading .link {
margin-bottom: 15px; overflow: hidden;
cursor: default; text-overflow: ellipsis;
white-space: nowrap;
} }
/*Content Paragraph*/ /*Content Paragraph*/
.content-text {
margin-bottom: 15px;
cursor: default;
transition: 100ms;
}
.content-text-in { .content-text-in {
background: whitesmoke; background: whitesmoke;
border-radius: 5px; border-radius: 5px;
@ -38,6 +47,7 @@
margin-bottom: 15px; margin-bottom: 15px;
cursor: default; cursor: default;
box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .25); box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .25);
transition: 100ms;
} }
.content-text-in div { .content-text-in div {
@ -56,34 +66,36 @@
} }
/*Badges*/ /*Badges*/
.lecture { .badge-pill {
cursor: default; cursor: default;
color: whitesmoke; color: whitesmoke;
}
.lecture {
background: var(--info); background: var(--info);
} }
.public { .public {
cursor: default;
color: whitesmoke;
background: var(--primary); background: var(--primary);
} }
.private { .private {
cursor: default;
color: whitesmoke;
background: var(--secondary); background: var(--secondary);
} }
.parent { .parent {
cursor: default;
color: whitesmoke;
background: var(--warning); background: var(--warning);
} }
/*Positioning*/ /*Grid System*/
.float-right { .row {
float: right; margin-left: 0;
transition: 100ms; margin-right: 0;
}
.col {
padding-left: 0;
padding-right: 0;
} }
/*Miscellanous*/ /*Miscellanous*/

2
src/main/resources/templates/create.html
View File

@ -9,7 +9,7 @@
<body> <body>
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid"> <div class="container">
<h1 class="def-cursor">Neue Gruppe</h1> <h1 class="def-cursor">Neue Gruppe</h1>

4
src/main/resources/templates/error.html
View File

@ -3,8 +3,8 @@
<html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html( <html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
name='Gruppenfindung', name='Gruppenfindung',
title='Error', title='Error',
headcontent=~{fragments/general :: headcontent(style='/error.css')}, headcontent=~{fragments/general :: headcontent(style='none')},
navigation=~{fragments/general :: nav(current='index')}, navigation=~{fragments/general :: nav(current='none')},
bodycontent=~{:: bodycontent})}"> bodycontent=~{:: bodycontent})}">
<body> <body>

2
src/main/resources/templates/fragments/general.html
View File

@ -21,7 +21,7 @@
<a th:href="@{/gruppen2/create}">Erstellen</a> <a th:href="@{/gruppen2/create}">Erstellen</a>
</li> </li>
<li th:class="${current == 'search'} ? 'active' : ''"> <li th:class="${current == 'search'} ? 'active' : ''">
<a th:href="@{/gruppen2/search}">Suche</a> <a th:href="@{/gruppen2/search}">Suchen</a>
</li> </li>
</ul> </ul>
</nav> </nav>

8
src/main/resources/templates/fragments/gruppen.html
View File

@ -4,14 +4,14 @@
<!--Grouptype Badges--> <!--Grouptype Badges-->
<th:block th:fragment="badges"> <th:block th:fragment="badges">
<span class="badge badge-pill private float-right" <span class="badge badge-pill private"
th:if='${group.getType() == private}'>Privat</span> th:if='${group.getType() == private}'>Privat</span>
<span class="badge badge-pill public float-right" <span class="badge badge-pill public"
th:if="${group.getType() == public}">Öffentlich</span> th:if="${group.getType() == public}">Öffentlich</span>
<span class="badge badge-pill lecture float-right" <span class="badge badge-pill lecture"
th:if='${group.getType() == lecture}'>Veranstaltung</span> th:if='${group.getType() == lecture}'>Veranstaltung</span>
<span class="badge badge-pill parent float-right" <span class="badge badge-pill parent"
th:if="${parent != null}" th:text="${parent.getTitle()}">Parent</span> th:if="${parent != null}" th:text="${parent.getTitle()}">Parent</span>
<!--Needs completly projected (cached) groups--> <!--Needs completly projected (cached) groups-->

4
src/main/resources/templates/index.html
View File

@ -15,8 +15,8 @@
<!--Gruppenliste belegte Gruppen--> <!--Gruppenliste belegte Gruppen-->
<div class="content" th:each="group: ${groups}"> <div class="content" th:each="group: ${groups}">
<div class="content-heading"> <div class="content-heading row">
<a class="link" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}" <a class="link col" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}"
th:text="${group.getTitle()}"></a> th:text="${group.getTitle()}"></a>
<span th:replace="~{fragments/gruppen :: badges}"></span> <span th:replace="~{fragments/gruppen :: badges}"></span>

12
src/main/resources/templates/search.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html( <html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
name='Gruppenbildung', name='Gruppenbildung',
title='Suchen',
headcontent=~{fragments/general :: headcontent(style='/search.css')}, headcontent=~{fragments/general :: headcontent(style='/search.css')},
navigation=~{fragments/general :: nav(current='search')}, navigation=~{fragments/general :: nav(current='search')},
bodycontent=~{:: bodycontent})}"> bodycontent=~{:: bodycontent})}">
@ -8,11 +9,11 @@
<body> <body>
<main th:fragment="bodycontent"> <main th:fragment="bodycontent">
<div class="container-fluid"> <div class="container-fluid">
<h1>Suche</h1> <h1>Suchen</h1>
<!--Suchfilter-->
<div class="content top"> <div class="content top">
<form method="post" th:action="@{/gruppen2/search}"> <form method="post" th:action="@{/gruppen2/search}">
<div class="input-group mb-3"> <div class="input-group mb-3">
@ -25,9 +26,12 @@
</form> </form>
</div> </div>
<!--Ergebnisliste-->
<div class="content" th:each="group: ${groups}"> <div class="content" th:each="group: ${groups}">
<div class="content-heading"> <div class="content-heading row">
<a class="link" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}" <span th:replace="~{fragments/gruppen :: badges}"></span>
<a class="link col" th:href="@{/gruppen2/details/{id}(id=${group.getId()})}"
th:text="${group.getTitle()}"></a> th:text="${group.getTitle()}"></a>
</div> </div>
<div class="content-text-in"> <div class="content-text-in">