refined css

2020-04-11 10:16:40 +02:00
parent bda952a308
commit fec54ccd9c
11 changed files with 60 additions and 46 deletions
--- a/src/main/resources/static/create.css
+++ b/src/main/resources/static/create.css
--- a/src/main/resources/static/error.css
+++ b/src/main/resources/static/error.css
--- a/src/main/resources/static/index.css
+++ b/src/main/resources/static/index.css
@ -1,40 +1,31 @@
 /*Grouplist Hover Effect*/
 .content {
+    padding-right: 20px;
    background: #e6f4ff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
-    transition: 100ms;
 }

 .content:hover {
+    padding-right: 10px;
    background: #d4ecff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
 }

-.content-heading {
-    transition: 100ms;
-}
-
 .content:hover .content-heading {
-    margin-left: 5px;
    padding-bottom: 10px;
+    padding-left: 10px;
 }

 .content-text-in {
-    margin-right: 10px;
    box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .075);
-    transition: 100ms;
 }

 .content:hover .content-text-in {
-    margin-right: 0;
    box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .25);
 }

-.float-right {
-    margin-right: 10px;
+/*Badges*/
+.badge-pill {
    margin-left: 10px;
-}
-
-.content:hover .float-right {
-    margin-right: 0;
+    align-self: flex-end;
 }
--- a/src/main/resources/static/search.css
+++ b/src/main/resources/static/search.css
@ -1,9 +1,9 @@
-.top {
+/*Grouplist*/
+.content.top {
    padding: 10px 10px !important;
    margin-bottom: 15px !important;
 }

-/*Grouplist Hover Effect*/
 .content {
    margin-top: 5px;
    padding: 5px 5px;
@ -11,10 +11,17 @@

 .content-heading {
    margin-bottom: 5px;
-    transition: 100ms;
 }

 .content-text-in {
+    box-shadow: none;
    margin-bottom: 0;
    padding: 5px;
 }
+
+/*Badges*/
+.badge-pill {
+    align-self: flex-start;
+    margin-top: 2px;
+    margin-right: 5px;
+}
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@ -15,6 +15,7 @@
    padding: 10px 10px;
    margin-top: 15px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
+    transition: 100ms;
 }

 /*Content Heading*/
@ -23,14 +24,22 @@
    font-weight: bold;
    font-optical-sizing: auto;
    overflow-wrap: break-word;
+    transition: 100ms;
 }

-.content-text {
-    margin-bottom: 15px;
-    cursor: default;
+.content-heading .link {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }

 /*Content Paragraph*/
+.content-text {
+    margin-bottom: 15px;
+    cursor: default;
+    transition: 100ms;
+}
+
 .content-text-in {
    background: whitesmoke;
    border-radius: 5px;
@ -38,6 +47,7 @@
    margin-bottom: 15px;
    cursor: default;
    box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .25);
+    transition: 100ms;
 }

 .content-text-in div {
@ -56,34 +66,36 @@
 }

 /*Badges*/
-.lecture {
+.badge-pill {
    cursor: default;
    color: whitesmoke;
+}
+
+.lecture {
    background: var(--info);
 }

 .public {
-    cursor: default;
-    color: whitesmoke;
    background: var(--primary);
 }

 .private {
-    cursor: default;
-    color: whitesmoke;
    background: var(--secondary);
 }

 .parent {
-    cursor: default;
-    color: whitesmoke;
    background: var(--warning);
 }

-/*Positioning*/
-.float-right {
-    float: right;
-    transition: 100ms;
+/*Grid System*/
+.row {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.col {
+    padding-left: 0;
+    padding-right: 0;
 }

 /*Miscellanous*/
--- a/src/main/resources/templates/create.html
+++ b/src/main/resources/templates/create.html
@ -9,7 +9,7 @@
 <body>

 <main th:fragment="bodycontent">
-    <div class="container-fluid">
+    <div class="container">

        <h1 class="def-cursor">Neue Gruppe</h1>

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

 <body>
--- a/src/main/resources/templates/fragments/general.html
+++ b/src/main/resources/templates/fragments/general.html
@ -21,7 +21,7 @@
            <a th:href="@{/gruppen2/create}">Erstellen</a>
        </li>
        <li th:class="${current == 'search'} ? 'active' : ''">
-            <a th:href="@{/gruppen2/search}">Suche</a>
+            <a th:href="@{/gruppen2/search}">Suchen</a>
        </li>
    </ul>
 </nav>
--- a/src/main/resources/templates/fragments/gruppen.html
+++ b/src/main/resources/templates/fragments/gruppen.html
@ -4,14 +4,14 @@

 <!--Grouptype 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>
-    <span class="badge badge-pill public float-right"
+    <span class="badge badge-pill public"
          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>

-    <span class="badge badge-pill parent float-right"
+    <span class="badge badge-pill parent"
          th:if="${parent != null}" th:text="${parent.getTitle()}">Parent</span>

    <!--Needs completly projected (cached) groups-->
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@ -15,8 +15,8 @@

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

                <span th:replace="~{fragments/gruppen :: badges}"></span>
--- a/src/main/resources/templates/search.html
+++ b/src/main/resources/templates/search.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
    name='Gruppenbildung',
+    title='Suchen',
    headcontent=~{fragments/general :: headcontent(style='/search.css')},
    navigation=~{fragments/general :: nav(current='search')},
    bodycontent=~{:: bodycontent})}">
@ -8,11 +9,11 @@
 <body>

 <main th:fragment="bodycontent">
-
    <div class="container-fluid">

-        <h1>Suche</h1>
+        <h1>Suchen</h1>

+        <!--Suchfilter-->
        <div class="content top">
            <form method="post" th:action="@{/gruppen2/search}">
                <div class="input-group mb-3">
@ -25,9 +26,12 @@
            </form>
        </div>

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