made table-styles globally aavilable for all tables, not only colonnade
This commit is contained in:
Felix Hamann
parent
5103974980
commit
7abc0dbc2f
@ -254,3 +254,79 @@ a.btn.btn-info:hover,
|
|||||||
.btn.btn-info:hover {
|
.btn.btn-info:hover {
|
||||||
background-color: var(--color-grey)
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,79 +1,76 @@
|
|||||||
<div .ui.container>
|
<div .profile>
|
||||||
|
|
||||||
<h1>
|
<table .table.table--striped.table--hover>
|
||||||
_{MsgProfileHeading} #{userDisplayName}
|
<tr.table__row>
|
||||||
|
<th> _{MsgName}
|
||||||
|
<td> #{display userDisplayName}
|
||||||
|
<tr.table__row>
|
||||||
|
<th> _{MsgMatrikelNr}
|
||||||
|
<td> #{display userMatrikelnummer}
|
||||||
|
<tr.table__row>
|
||||||
|
<th> _{MsgEMail}
|
||||||
|
<td> #{display userEmail}
|
||||||
|
<tr.table__row>
|
||||||
|
<th> _{MsgIdent}
|
||||||
|
<td> #{display userIdent}
|
||||||
|
<tr.table__row>
|
||||||
|
<th> _{MsgPlugin}
|
||||||
|
<td> #{display userPlugin}
|
||||||
|
$if not $ null admin_rights
|
||||||
|
<tr.table__row>
|
||||||
|
<th> Administrator
|
||||||
|
<td>
|
||||||
|
<ul>
|
||||||
|
$forall institute <- admin_rights
|
||||||
|
<li>#{display institute}
|
||||||
|
$if not $ null lecturer_rights
|
||||||
|
<tr.table__row>
|
||||||
|
<th> Lehrberechtigt
|
||||||
|
<td>
|
||||||
|
<ul>
|
||||||
|
$forall institute <- lecturer_rights
|
||||||
|
<li>#{display institute}
|
||||||
|
$if not $ null lecture_owner
|
||||||
|
<tr.table__row>
|
||||||
|
<th> Eigene Kurse
|
||||||
|
<td>
|
||||||
|
<ul>
|
||||||
|
$forall (E.Value csh, E.Value tid) <- lecture_owner
|
||||||
|
<li>
|
||||||
|
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
||||||
|
$if not $ null lecture_corrector
|
||||||
|
<tr.table__row>
|
||||||
|
<th> Korrektor
|
||||||
|
<td>
|
||||||
|
<ul>
|
||||||
|
$forall (E.Value csh, E.Value tid) <- lecture_corrector
|
||||||
|
<li>
|
||||||
|
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
||||||
|
$if not $ null studies
|
||||||
|
<tr.table__row>
|
||||||
|
<th> Studiengänge
|
||||||
|
<td>
|
||||||
|
<table .table .table-striped .table-hover>
|
||||||
|
<tr.table__row>
|
||||||
|
<th> Abschluss
|
||||||
|
<th> Studiengang
|
||||||
|
<th> Studienart
|
||||||
|
<th> Semester
|
||||||
|
|
||||||
<table .table .table-striped >
|
$forall (degree,field,fieldtype,semester) <- studies
|
||||||
<tr>
|
<tr.table__row>
|
||||||
<th> _{MsgName}
|
<td> #{display degree}
|
||||||
<td> #{display userDisplayName}
|
<td> #{display field}
|
||||||
<tr>
|
<td> #{display fieldtype}
|
||||||
<th> _{MsgMatrikelNr}
|
<td> #{display semester}
|
||||||
<td> #{display userMatrikelnummer}
|
$if not $ null participant
|
||||||
<tr>
|
<tr.table__row>
|
||||||
<th> _{MsgEMail}
|
<th> Teilnehmer
|
||||||
<td> #{display userEmail}
|
<td>
|
||||||
<tr>
|
<ul>
|
||||||
<th> _{MsgIdent}
|
$forall (E.Value csh, E.Value tid, regSince) <- participant
|
||||||
<td> #{display userIdent}
|
<li>
|
||||||
<tr>
|
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
||||||
<th> _{MsgPlugin}
|
seit #{display regSince}
|
||||||
<td> #{display userPlugin}
|
|
||||||
$if not $ null admin_rights
|
|
||||||
<tr>
|
|
||||||
<th> Administrator
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
$forall institute <- admin_rights
|
|
||||||
<li>#{display institute}
|
|
||||||
$if not $ null lecturer_rights
|
|
||||||
<tr>
|
|
||||||
<th> Lehrberechtigt
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
$forall institute <- lecturer_rights
|
|
||||||
<li>#{display institute}
|
|
||||||
$if not $ null lecture_owner
|
|
||||||
<tr>
|
|
||||||
<th> Eigene Kurse
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
$forall (E.Value csh, E.Value tid) <- lecture_owner
|
|
||||||
<li>
|
|
||||||
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
|
||||||
$if not $ null lecture_corrector
|
|
||||||
<tr>
|
|
||||||
<th> Korrektor
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
$forall (E.Value csh, E.Value tid) <- lecture_corrector
|
|
||||||
<li>
|
|
||||||
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
|
||||||
$if not $ null studies
|
|
||||||
<tr>
|
|
||||||
<th> Studiengänge
|
|
||||||
<td>
|
|
||||||
<table .table .table-striped .table-hover>
|
|
||||||
<tr>
|
|
||||||
<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}
|
|
||||||
$if not $ null participant
|
|
||||||
<tr>
|
|
||||||
<th> Teilnehmer
|
|
||||||
<td>
|
|
||||||
<ul>
|
|
||||||
$forall (E.Value csh, E.Value tid, regSince) <- participant
|
|
||||||
<li>
|
|
||||||
<a href=@{CourseR tid csh CShowR}>#{display tid} - #{csh}
|
|
||||||
seit #{display regSince}
|
|
||||||
|
|
||||||
^{settingsForm}
|
^{settingsForm}
|
||||||
|
|||||||
@ -3,7 +3,7 @@ $newline never
|
|||||||
$maybe sortableP <- pSortable
|
$maybe sortableP <- pSortable
|
||||||
$with toSortable <- toSortable sortableP
|
$with toSortable <- toSortable sortableP
|
||||||
<thead>
|
<thead>
|
||||||
<tr .table__row.table__row--head>
|
<tr .table__row>
|
||||||
$forall OneColonnade{..} <- getColonnade dbtColonnade
|
$forall OneColonnade{..} <- getColonnade dbtColonnade
|
||||||
<!-- TODO: give ths a class 'table__th' -->
|
<!-- TODO: give ths a class 'table__th' -->
|
||||||
<!-- TODO: wrap content of th in 'div.table__th-content' -->
|
<!-- TODO: wrap content of th in 'div.table__th-content' -->
|
||||||
|
|||||||
@ -1,83 +1,4 @@
|
|||||||
|
/* SORTABLE TABLE */
|
||||||
.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 */
|
|
||||||
.table {
|
.table {
|
||||||
|
|
||||||
/* TODO: move outside of table as soon as tds and ths get their own class */
|
/* TODO: move outside of table as soon as tds and ths get their own class */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user