GNM-149 Kacheln im Portal überlagern sich. Vertikalen Abstand dem horizontalen angleichen.
diff --git a/src/app/pages/module-grid/module-grid.component.css b/src/app/pages/module-grid/module-grid.component.css
index c4a0646..9d64336 100644
--- a/src/app/pages/module-grid/module-grid.component.css
+++ b/src/app/pages/module-grid/module-grid.component.css
@@ -9,6 +9,7 @@
*
******************************************************************************
*/
+
#topcontainer {
height: 20px;
}
@@ -22,15 +23,27 @@
height: 30px;
}
-a:link { text-decoration: none; color: white; }
-a:hover { text-decoration: none; color: white; }
-a:visited { text-decoration: none; color: white;}
+a:link {
+ text-decoration: none;
+ color: white;
+}
+
+a:hover {
+ text-decoration: none;
+ color: white;
+}
+
+a:visited {
+ text-decoration: none;
+ color: white;
+}
::ng-deep md-grid-tile.mat-grid-tile {
width: calc(((25% - 0.75px) * 1) - 20px) !important;
}
/* Grow */
+
.hvr-grow {
display: inline-block;
vertical-align: middle;
@@ -53,109 +66,135 @@
position: absolute;
z-index: -1;
width: 3px;
- height: 4%; }
-
- .underline-opening:hover:after {
+ height: 4%;
+}
+
+.underline-opening:hover:after {
width: 100%;
- height: 4%; }
-
- .underline-opening:before {
+ height: 4%;
+}
+
+.underline-opening:before {
content: "";
position: absolute;
z-index: -1;
width: 3px;
- height: 4%; }
-
- .underline-opening:hover:before {
+ height: 4%;
+}
+
+.underline-opening:hover:before {
width: 100%;
- height: 4%; }
-
- .underline-opening:after {
+ height: 4%;
+}
+
+.underline-opening:after {
bottom: 0%;
left: 0%;
right: 0;
- margin: 0 auto; }
-
- .underline-opening:before {
+ margin: 0 auto;
+}
+
+.underline-opening:before {
bottom: 0%;
right: 0%;
left: 0;
- margin: 0 auto; }
+ margin: 0 auto;
+}
- /* Base */
+/* Base */
- .element {
- display: inline;
- position: relative;
- z-index: 2;
- text-decoration: none;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-touch-callout: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- padding: 2px 0px;
- white-space: nowrap;
- overflow: hidden;
- -webkit-transition: color 1s ease;
- -moz-transition: color 1s ease;
- -ms-transition: color 1s ease;
- -o-transition: color 1s ease;
- transition: color 1s ease;
- }
-
- .element:hover,
- .element:focus {
- outline: 0;
- color: #FFFFFF;
- -webkit-transition: color 1s ease;
- -moz-transition: color 1s ease;
- -ms-transition: color 1s ease;
- -o-transition: color 1s ease;
- transition: color 1s ease;
- cursor: pointer;
- }
-
- .element:before {
- -webkit-transition: all 1s ease; /* add delay if wanted */
- -moz-transition: all 1s ease; /* add delay if wanted */
- -ms-transition: all 1s ease; /* add delay if wanted */
- -o-transition: all 1s ease; /* add delay if wanted */
- transition: all 1s ease; /* add delay if wanted */
- width: 0%;
- }
-
- .element:after {
- -webkit-transition: all 1s ease; /* add delay if wanted */
- -moz-transition: all 1s ease; /* add delay if wanted */
- -ms-transition: all 1s ease; /* add delay if wanted */
- -o-transition: all 1s ease; /* add delay if wanted */
- transition: all 1s ease; /* add delay if wanted */
- width: 0%;
- }
-
- .element:hover:after,
- .element:focus:after {
- outline: 0;
- background-color:#fff;
- -webkit-transition: all 1s ease; /* add delay if wanted */
- -moz-transition: all 1s ease; /* add delay if wanted */
- -ms-transition: all 1s ease; /* add delay if wanted */
- -o-transition: all 1s ease; /* add delay if wanted */
- transition: all 1s ease; /* add delay if wanted */
- }
-
- .element:hover:before,
- .element:focus:before {
- outline: 0;
- background-color: #fff;
- -webkit-transition: all 1s ease; /* add delay if wanted */
- -moz-transition: all 1s ease; /* add delay if wanted */
- -ms-transition: all 1s ease; /* add delay if wanted */
- -o-transition: all 1s ease; /* add delay if wanted */
- transition: all 1s ease; /* add delay if wanted */
- }
+.element {
+ display: inline;
+ position: relative;
+ z-index: 2;
+ text-decoration: none;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ -webkit-touch-callout: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ padding: 2px 0px;
+ white-space: nowrap;
+ overflow: hidden;
+ -webkit-transition: color 1s ease;
+ -moz-transition: color 1s ease;
+ -ms-transition: color 1s ease;
+ -o-transition: color 1s ease;
+ transition: color 1s ease;
+}
+
+.element:hover,
+.element:focus {
+ outline: 0;
+ color: #FFFFFF;
+ -webkit-transition: color 1s ease;
+ -moz-transition: color 1s ease;
+ -ms-transition: color 1s ease;
+ -o-transition: color 1s ease;
+ transition: color 1s ease;
+ cursor: pointer;
+}
+
+.element:before {
+ -webkit-transition: all 1s ease;
+ /* add delay if wanted */
+ -moz-transition: all 1s ease;
+ /* add delay if wanted */
+ -ms-transition: all 1s ease;
+ /* add delay if wanted */
+ -o-transition: all 1s ease;
+ /* add delay if wanted */
+ transition: all 1s ease;
+ /* add delay if wanted */
+ width: 0%;
+}
+
+.element:after {
+ -webkit-transition: all 1s ease;
+ /* add delay if wanted */
+ -moz-transition: all 1s ease;
+ /* add delay if wanted */
+ -ms-transition: all 1s ease;
+ /* add delay if wanted */
+ -o-transition: all 1s ease;
+ /* add delay if wanted */
+ transition: all 1s ease;
+ /* add delay if wanted */
+ width: 0%;
+}
+
+.element:hover:after,
+.element:focus:after {
+ outline: 0;
+ background-color: #fff;
+ -webkit-transition: all 1s ease;
+ /* add delay if wanted */
+ -moz-transition: all 1s ease;
+ /* add delay if wanted */
+ -ms-transition: all 1s ease;
+ /* add delay if wanted */
+ -o-transition: all 1s ease;
+ /* add delay if wanted */
+ transition: all 1s ease;
+ /* add delay if wanted */
+}
+
+.element:hover:before,
+.element:focus:before {
+ outline: 0;
+ background-color: #fff;
+ -webkit-transition: all 1s ease;
+ /* add delay if wanted */
+ -moz-transition: all 1s ease;
+ /* add delay if wanted */
+ -ms-transition: all 1s ease;
+ /* add delay if wanted */
+ -o-transition: all 1s ease;
+ /* add delay if wanted */
+ transition: all 1s ease;
+ /* add delay if wanted */
+}
\ No newline at end of file
diff --git a/src/app/pages/module-grid/module-grid.component.html b/src/app/pages/module-grid/module-grid.component.html
index 3955ee5..b3e0276 100644
--- a/src/app/pages/module-grid/module-grid.component.html
+++ b/src/app/pages/module-grid/module-grid.component.html
@@ -12,26 +12,21 @@
<div>
-<div id="topcontainer"></div>
-<div id="centercontainer">
-<md-grid-list *ngIf="moduleRights" cols="4" md-gutter="50px"
- rowHeight="300px">
- <md-grid-tile (click) = "goToElogbookIfValid(userModule)" style="cursor: pointer;"
- *ngFor="let userModule of userModules"
- [colspan]="userModule.cols"
- [rowspan]="userModule.rows"
- [style.color]="userModule.color"
- [style.background]="000000"
- [style.background-image]="'url(' + userModule.pictureLink + ')'"
- class="md-whiteframe-4dp hvr-grow"
- >
- <md-grid-tile-footer><h3 class="element underline-opening">{{userModule.name}}</h3></md-grid-tile-footer>
- </md-grid-tile>
-</md-grid-list>
-<div *ngIf="!moduleRights" style="text-align: center;">
- <h2>Der Benutzer hat keine Rechte</h2>
- <h4>Bitte kontaktieren Sie Ihren Administrator</h4>
-</div>
-</div>
-<div id="bottomcontainer"></div>
+ <div id="topcontainer"></div>
+ <div id="centercontainer">
+ <md-grid-list *ngIf="moduleRights" cols="4" rowHeight="300px" gutterSize="30px" style="padding-top:50px;">
+ <md-grid-tile (click)="goToElogbookIfValid(userModule)" style="cursor: pointer; border-radius: 10px; padding: 50px;" *ngFor="let userModule of userModules"
+ [colspan]="userModule.cols" [rowspan]="userModule.rows" [style.color]="userModule.color" [style.background]="000000"
+ [style.background-image]="'url(' + userModule.pictureLink + ')'" class="md-whiteframe-4dp hvr-grow">
+ <md-grid-tile-footer>
+ <h3 class="element underline-opening">{{userModule.name}}</h3>
+ </md-grid-tile-footer>
+ </md-grid-tile>
+ </md-grid-list>
+ <div *ngIf="!moduleRights" style="text-align: center;">
+ <h2>Der Benutzer hat keine Rechte</h2>
+ <h4>Bitte kontaktieren Sie Ihren Administrator</h4>
+ </div>
+ </div>
+ <div id="bottomcontainer"></div>
</div>
\ No newline at end of file
