Merge branch 'fix/tables' into 'master'
fixes for table styles and other smaller design issues See merge request !35
This commit is contained in:
Felix Hamann
commit
90f2748829
@ -254,3 +254,101 @@ a.btn.btn-info:hover,
|
||||
.btn.btn-info:hover {
|
||||
background-color: var(--color-grey)
|
||||
}
|
||||
|
||||
/* GENERAL TABLE STYLES */
|
||||
.table {
|
||||
margin: 21px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table--striped {
|
||||
|
||||
.table__row:not(.no-stripe):nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.table--hover {
|
||||
|
||||
.table__row:not(.no-hover):not(.table__row--head):hover {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
/* SCROLLTABLE */
|
||||
.scrolltable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* TABLE DESIGN */
|
||||
.table__row {
|
||||
|
||||
/* TODO: move outside of table__row as soon as tds and ths get their own class */
|
||||
/* .table__td, .table__th { */
|
||||
td, th {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* .table__td { */
|
||||
td {
|
||||
font-size: 16px;
|
||||
color: #808080;
|
||||
line-height: 1.4;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* .table__th { */
|
||||
th {
|
||||
background-color: var(--color-dark);
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
.table th {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.table__td-content {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table__th-link {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.table--vertical {
|
||||
|
||||
th {
|
||||
background-color: transparent;
|
||||
color: var(--color-font);
|
||||
width: 170px;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: 600;
|
||||
color: var(--color-font);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div .alert .alert-danger>
|
||||
<div .alert__content>
|
||||
<div .notification .notification-danger>
|
||||
<div .notification__content>
|
||||
<h1>
|
||||
Hinweis zum Datenschutz
|
||||
<p>
|
||||
|
||||
50
templates/dsgvDisclaimer.lucius
Normal file
50
templates/dsgvDisclaimer.lucius
Normal file
@ -0,0 +1,50 @@
|
||||
.notification {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
padding: 10px 20px 20px;
|
||||
margin: 40px 0;
|
||||
color: var(--color-lighter);
|
||||
box-shadow: 0 0 4px 2px inset currentColor;
|
||||
padding-left: 20%;
|
||||
color: #318dc5 ;
|
||||
|
||||
&::before {
|
||||
content: 'i';
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
font-size: 100px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.notification {
|
||||
|
||||
padding-left: 40px;
|
||||
|
||||
&::before {
|
||||
height: auto;
|
||||
width: 45px;
|
||||
font-size: 40px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notification-danger {
|
||||
color: #c51919 ;
|
||||
|
||||
&::before {
|
||||
content: '!';
|
||||
}
|
||||
}
|
||||
|
||||
.notification__content {
|
||||
color: var(--color-font);
|
||||
}
|
||||
@ -17,4 +17,4 @@ $# new files
|
||||
<input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
|
||||
<div class="js-tooltip">
|
||||
<div class="tooltip__handle">?
|
||||
<div class="tooltip__content hidden">Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.
|
||||
<div class="tooltip__content hidden">Entpackt hochgeladene Zip-Dateien (*.zip) automatisch und fügt den Inhalt dem Stamm-Verzeichnis der Abgabe hinzu.
|
||||
|
||||
@ -1,40 +1,38 @@
|
||||
<div .ui.container>
|
||||
<div .profile>
|
||||
|
||||
<h1>
|
||||
_{MsgProfileHeading} #{userDisplayName}
|
||||
|
||||
<table .table .table-striped >
|
||||
<tr>
|
||||
<div .scrolltable>
|
||||
<table .table.table--striped.table--hover.table--vertical>
|
||||
<tr.table__row>
|
||||
<th> _{MsgName}
|
||||
<td> #{display userDisplayName}
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> _{MsgMatrikelNr}
|
||||
<td> #{display userMatrikelnummer}
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> _{MsgEMail}
|
||||
<td> #{display userEmail}
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> _{MsgIdent}
|
||||
<td> #{display userIdent}
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> _{MsgPlugin}
|
||||
<td> #{display userPlugin}
|
||||
$if not $ null admin_rights
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> Administrator
|
||||
<td>
|
||||
<ul>
|
||||
$forall institute <- admin_rights
|
||||
<li>#{display institute}
|
||||
$if not $ null lecturer_rights
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> Lehrberechtigt
|
||||
<td>
|
||||
<ul>
|
||||
$forall institute <- lecturer_rights
|
||||
<li>#{display institute}
|
||||
$if not $ null lecture_owner
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> Eigene Kurse
|
||||
<td>
|
||||
<ul>
|
||||
@ -42,7 +40,7 @@
|
||||
<li>
|
||||
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
||||
$if not $ null lecture_corrector
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> Korrektor
|
||||
<td>
|
||||
<ul>
|
||||
@ -50,24 +48,24 @@
|
||||
<li>
|
||||
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
||||
$if not $ null studies
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> Studiengänge
|
||||
<td>
|
||||
<table .table .table-striped .table-hover>
|
||||
<tr>
|
||||
<th> Abschluss
|
||||
<th> Studiengang
|
||||
<th> Studienart
|
||||
<th> Semester
|
||||
<table .table .table-striped .table-hover>
|
||||
<tr.table__row>
|
||||
<th> Abschluss
|
||||
<th> Studiengang
|
||||
<th> Studienart
|
||||
<th> Semester
|
||||
|
||||
$forall (degree,field,fieldtype,semester) <- studies
|
||||
<tr>
|
||||
<td> #{display degree}
|
||||
<td> #{display field}
|
||||
<td> #{display fieldtype}
|
||||
<td> #{display semester}
|
||||
$forall (degree,field,fieldtype,semester) <- studies
|
||||
<tr.table__row>
|
||||
<td> #{display degree}
|
||||
<td> #{display field}
|
||||
<td> #{display fieldtype}
|
||||
<td> #{display semester}
|
||||
$if not $ null participant
|
||||
<tr>
|
||||
<tr.table__row>
|
||||
<th> Teilnehmer
|
||||
<td>
|
||||
<ul>
|
||||
|
||||
@ -244,7 +244,7 @@ input[type="checkbox"]:checked::after {
|
||||
.file-input__label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background-color: var(--color-light);
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
padding: 10px 17px;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -3,7 +3,7 @@ $newline never
|
||||
$maybe sortableP <- pSortable
|
||||
$with toSortable <- toSortable sortableP
|
||||
<thead>
|
||||
<tr .table__row.table__row--head>
|
||||
<tr .table__row>
|
||||
$forall OneColonnade{..} <- getColonnade dbtColonnade
|
||||
<!-- TODO: give ths a class 'table__th' -->
|
||||
<!-- TODO: wrap content of th in 'div.table__th-content' -->
|
||||
|
||||
@ -1,83 +1,4 @@
|
||||
|
||||
.table {
|
||||
margin: 21px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table--striped {
|
||||
|
||||
.table__row:not(.no-stripe):nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.table--hover {
|
||||
|
||||
.table__row:not(.no-hover):not(.table__row--head):hover {
|
||||
background-color: rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
/* TABLE DESIGN */
|
||||
.table__row {
|
||||
|
||||
/* TODO: move outside of table__row as soon as tds and ths get their own class */
|
||||
/* .table__td, .table__th { */
|
||||
td, th {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* .table__td { */
|
||||
td {
|
||||
font-size: 16px;
|
||||
color: #808080;
|
||||
line-height: 1.4;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.table__row--head {
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
|
||||
/* .table__th { */
|
||||
th {
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
.table th {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.table__td-content {
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table__th-link {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* SORTABLE */
|
||||
/* SORTABLE TABLE */
|
||||
.table {
|
||||
|
||||
/* TODO: move outside of table as soon as tds and ths get their own class */
|
||||
|
||||
@ -37,8 +37,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* SCROLLTABLE */
|
||||
.scrolltable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user