Update Splash Screen

src/ui/nehubaContainer/splashScreen/splashScreen.component.ts

@@ -36,4 +36,8 @@ export class SplashScreen{
   get totalTemplates(){
     return this.constanceService.templateUrls.length
   }
+
+  correctString(name){
+    return name.replace(/[|&;$%@()+,\s./]/g, '')
+  }
 }
\ No newline at end of file

src/ui/nehubaContainer/splashScreen/splashScreen.style.css

 div[splashScreenContainer]
 {
+
   height:100%;
+  display:flex;
+  /* flex-direction: column; */
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  overflow-y:auto;
+}
+
+div[splashScreenHeader] {
+  min-height: 100px;
+  width: 100%;
+  background-color: #EF5450;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+}
+
+
+span[splashScreenHeaderTitle] {
+  font-size: 45px;
+}
+
+div[splashScreenTemplate] {
+
+  width: 100%;
+  margin: 20px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+}
+
+div[splashScreenTemplateItem] {
+  max-width: 600px;
+  width: 400px;
+  background-color: blue;
+  margin: 20px 20px;
+  display: flex;
+  flex-direction: row;
+  /* flex-direction: row; */
+  flex-wrap: wrap;
+  justify-content: center;
+
+}
+
+div[splashScreenTemplateHeader] {
+  align-self: center;
+  text-align: center;
+  font-size: 30px;
+  font-size: 2vw;
+  /* font-size: 30px; */
+  margin: 0 0 20px 0;
+
+}
+
+div[splashScreenTemplateBody] {
+  display: flex;
+  flex-direction: column;
+}
+
+div[splashScreenTemplateBodyDescription] {
+  flex: 1;
+  text-align: justify;
+  margin: 0 10px 10px 10px;
+}
+div[splashScreenTemplateBodyImage] {
+  flex: 1;
+}
+
+.template-image {
+  width: 100%;
+  height: auto;
+}
+
+.template-card {
+  width: 100%;
+  cursor: pointer;
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+.template-card:hover {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
+}
+
+/* @media screen and (max-width: 1500px) {
+  div[splashScreenTemplateBody] {
+    flex-direction: column;
+  }
+  .template-card {
+    width: 40%;
+  }
+} */
+
+@media screen and (max-width: 670px) {
+  span[splashScreenHeaderTitle] {
+    visibility: hidden;
+  }
+  div[splashScreenTemplate] {
+    margin: 20px 20px;
+  }
+  div[splashScreenTemplateBody] {
+    flex-direction: column;
+  }
 }
 
+/*
 div[templateCardContainer]
 {
   height:100%;
@@ -33,4 +143,4 @@ div[templateCard]
 div[templateCard]:hover
 {
   background-color:rgba(242,242,242,0.8);
-}
\ No newline at end of file
+} */
\ No newline at end of file

src/ui/nehubaContainer/splashScreen/splashScreen.template.html

+<div splashScreenContainer>
+  <div splashScreenHeader>
+    <span splashScreenHeaderTitle media="screen and (min-width: 670px)">Iteractive Atlas Viewer</span>
+  </div>
+  <div splashScreenTemplate>
+    <div *ngFor="let template of loadedTemplate$ | async | filterNull" splashScreenTemplateItem>
+      <div class="template-card" (click) = "selectTemplate(template)">
+
+        <div splashScreenTemplateHeader>
+          {{template.properties.name}}
+        </div>
+        <div splashScreenTemplateBody>
+          <div splashScreenTemplateBodyImage>
+            <img class="template-image" [src]="'./res/image/' + correctString(template.properties.name) + '.png'">
+          </div>
+          <div splashScreenTemplateBodyDescription>
+            {{template.properties.description.substring(0, 500)}}
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</div>
+
+
+
+<!--
 <div class = "container-fluid" splashScreenContainer>
-  <div 
-    class = "row" 
+  <div
+    class = "row"
     templateCardContainer>
-    
+
     <div
-      *ngFor = "let template of loadedTemplate$ | async | filterNull" 
+      *ngFor = "let template of loadedTemplate$ | async | filterNull"
       (click) = "selectTemplate(template)"
       templateCard
       hoverable>
-      
+
       <h2>{{ template.properties.name }}</h2>
       <readmore-component>
         <small>{{ template.properties.description }}</small>
@@ -25,4 +54,4 @@
       </h1>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div> -->
\ No newline at end of file