feat(): new main example with navigation and 3 pages #144

Ks89 · Aug 15, 2018 · 84e5b8c · 84e5b8c
1 parent 48a4289
commit 84e5b8c
Show file tree

Hide file tree

Showing 16 changed files with 2,381 additions and 1,303 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -1,7 +1,16 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+import { ModalGalleryComponent } from './modal-gallery/modal-gallery.component';
+import { PlainGalleryComponent } from './plain-gallery/plain-gallery.component';
+import { CarouselComponent } from './carousel/carousel.component';
+
+const routes: Routes = [
+  { path: '', component: CarouselComponent },
+  { path: 'carousel', component: CarouselComponent },
+  { path: 'modal', component: ModalGalleryComponent },
+  { path: 'plain', component: PlainGalleryComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

diff --git a/src/app/app.component.html b/src/app/app.component.html
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -20,119 +20,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-$text-color: #fff;
-$background: rgba(0, 0, 0, .7);
-
-.my-app-custom-plain-container-row {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-
-  .my-app-custom-image-row {
-    cursor: pointer;
-    height: auto;
-    margin-right: 2px;
-    width: 50px;
-
-    &.after {
-      border-top: 2px;
-      cursor: pointer;
-      display: none;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-}
-
-.my-app-custom-plain-container-column {
-  align-items: center;
+.menu {
   display: flex;
-  flex-direction: column;
   justify-content: flex-start;
-
-  .my-app-custom-image-column {
-    cursor: pointer;
-    height: auto;
-    margin-right: 2px;
-    width: 50px;
-
-    &.after {
-      border-top: 2px;
-      cursor: pointer;
-      display: none;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-}
-
-.my-app-custom-plain-container-with-desc {
   align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-
-  figure {
-    margin: 0;
-    position: relative;
-
-    img {
-      max-width: 100%;
-      height: auto;
-      cursor: pointer;
-    }
-
-    figcaption {
-      background: rgba(0, 0, 0, .5);
-      color: #fff;
-      font-size: 85%;
-      padding: 5px;
-      position: absolute;
-      bottom: 3px;
-      left: 0;
-      right: 0;
-    }
-  }
 
-  .description {
-    font-weight: bold;
-    text-align: center;
+  > .menu-item {
+    margin-left: 10px;
   }
-
-  .my-app-custom-image-with-desc {
-    height: auto;
-    margin-right: 2px;
-    width: 200px;
-    align-self: start;
-  }
-}
-
-.more {
-  background: $background;
-  cursor: pointer;
-  color: $text-color;
-  padding-top: 4px;
-  height: 46px;
-  position: absolute;
-  text-align: center;
-  width: 50px;
-}
-
-
-.transcluded {
-  color: white;
-  font-weight: 600;
-  font-size: 24px;
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  pointer-events: none;
 }