Feat : added snackbar component

Mohasin-Haque · Feb 6, 2022 · ac409e5 · ac409e5
2 parents d0b2790 + 012cb98
commit ac409e5
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 1 deletion.
diff --git a/pages/alert.html b/pages/alert.html
@@ -38,8 +38,9 @@
             <a href="./card.html" class="item">Card</a>
             <a href="./dialogue.html" class="item">Dialogue</a>
             <a href="./image.html" class="item">Image</a>
-            <a href="./input.html" class="item">Input</a>
+            <a href="./input.html" class="item">Input</a>       
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/avatar.html b/pages/avatar.html
@@ -40,6 +40,7 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/badge.html b/pages/badge.html
@@ -40,6 +40,7 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/button.html b/pages/button.html
@@ -40,6 +40,7 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/card.html b/pages/card.html
@@ -39,6 +39,7 @@
             <a href="./dialogue.html" class="item">Dialogue</a>
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
 

diff --git a/pages/dialogue.html b/pages/dialogue.html
@@ -40,6 +40,7 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/documentation.html b/pages/documentation.html
@@ -40,6 +40,7 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
 </body>

diff --git a/pages/image.html b/pages/image.html
@@ -40,6 +40,7 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/input.html b/pages/input.html
@@ -40,6 +40,7 @@
             <a href="./image.html" class="item">Image</a>
             <a href="./input.html" class="item">Input</a>
             <a href="./navbar.html" class="item">Navbar</a>
+            <a href="./toast.html" class="item">Snackbar</a>
         </div>
     </div>
     <div class="main-container-components">

diff --git a/pages/toast.html b/pages/toast.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="Mohasin Haque" />
+    <meta name="description" content="Want some samples of snacbars?? Explore this page to get one."/>
+    <link rel="icon" href="https://img.icons8.com/ios-glyphs/50/000000/fast-track.png" />
+    <link rel="stylesheet" href="../styles/main.css">
+    <title>Snackbar | FAST UI</title>
+</head>
+
+<body>
+    <header>
+        <nav class="navbar">
+            <div class="left-nav">
+                <a href="../index.html" class="nav nav-logo">FAST UI</a>
+                <span class="small-text">V 1.0</span>
+            </div>
+            <div class="right-nav">
+                <ul class="list">
+                    <li><a href="../index.html" class="nav nav-pills">Home</a></li>
+                    <li><a href="./avatar.html" class="nav right-nav-active nav-pills">Documentation</a></li>
+                    <li><a href="./installation.html" class="nav nav-pills">Installation</a></li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <div class="main-container">
+        <div class="items">
+            <p class="subtext">Components</p>
+            <a href="./avatar.html" class="item">Avatar</a>
+            <a href="./alert.html" class="item">Alert</a>
+            <a href="./badge.html" class="item">Badges</a>
+            <a href="./button.html" class="item">Button</a>
+            <a href="./card.html" class="item">Card</a>
+            <a href="./dialogue.html" class="item">Dialogue</a>
+            <a href="./image.html" class="item">Image</a>
+            <a href="./input.html" class="item">Input</a>
+            <a href="./toast.html" class="item">Snackbar</a>
+        </div>
+    </div>
+
+    <div class="main-container-components">
+        <h2 class="heading">Snackbar</h2>
+        <p class="description">Snackbars provide brief notifications. The component is also known as a toast.They appear
+            temporarily, towards the bottom of the screen. They shouldn't interrupt the user experience, and they don't
+            require user input to disappear. Snackbars contain a single line of text directly related to the operation
+            performed. They may contain a text action, but no icons. You can use them to display notifications.
+        </p>
+        <!-- Basic Horizontal-->
+        <h3 class="heading heading-avatar">Basic Snackbar</h3>
+        <p class="description description-avatar">Some snackbars with varying message length. You can use <span
+                class="colored-text">
+                toast-container</span> for toast layout and for components use <span class="colored-text"> toast-text,
+                retry, toast-icon</span> etc. classes as
+            shown below. </p>
+
+        <iframe class="code-snippet-display"
+            src="https://carbon.now.sh/embed?bg=rgba%28255%2C59%2C48%2C1%29&t=base16-light&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=82px&dsblur=100px&wc=true&wa=true&pv=27px&ph=22px&ln=false&fl=1&fm=IBM+Plex+Mono&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%253C%21--%2520Simple%2520Toast%2520--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522toast-container%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522toast-text%2522%253ECan%27t%2520send%2520photo.%2520Retry%2520in%25205%2520seconds.%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522retry%2522%253ERETRY%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522toast-icon%2522%253EX%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
+            sandbox="allow-scripts allow-same-origin">
+        </iframe>
+        <div class="badge_container-main flex-center">
+            <div class="toast-container">
+                <div class="toast-text">Can't send photo. Retry in 5 seconds.</div>
+                <div class="retry">RETRY</div>
+                <div class="toast-icon">X</div>
+            </div>
+
+            <!-- Leading -->
+            <div class="toast-container">
+                <div class="toast-text">Your photo has been archieved.</div>
+                <div class="retry undo">UNDO</div>
+                <div class="toast-icon">X</div>
+            </div>
+            </div>
+
+            <!-- Stacked -->
+            <h3 class="heading heading-avatar">Stacked Snackbar</h3>
+            <p class="description description-avatar">Snackbars with stacked link. You can use <span
+                    class="colored-text">
+                    toast-container</span> for toast layout and for components use <span class="colored-text">
+                    toast-text,
+                    retry, toast-icon</span> etc. classes as
+                shown below. </p>
+
+            <iframe class="code-snippet-display"
+                src="https://carbon.now.sh/embed?bg=rgba%28255%2C59%2C48%2C1%29&t=base16-light&wt=none&l=htmlmixed&width=680&ds=false&dsyoff=82px&dsblur=100px&wc=true&wa=true&pv=27px&ph=22px&ln=false&fl=1&fm=IBM+Plex+Mono&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%253C%21--%2520Stacked%2520Toast%2520--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522toast-container%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522toast-text%2522%253EThis%2520item%2520already%2520has%2520the%2520label%2520%2522travel%2522.%2520You%2520can%2520add%2520a%2520new%2520label.%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522actions%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522retry%2522%253EADD%2520A%2520NEW%2520LABEL%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cdiv%2520class%253D%2522toast-icon%2522%253EX%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fdiv%253E"
+                sandbox="allow-scripts allow-same-origin">
+            </iframe>
+            <div class="badge_container-main flex-center">
+            <div class="toast-container">
+                <div class="toast-text">This item already has the label "travel". You can add a new label.</div>
+                <div class="actions">
+                    <div class="retry">ADD A NEW LABEL</div>
+                    <div class="toast-icon">X</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/styles/main.css b/styles/main.css
@@ -9,6 +9,7 @@
 @import url("../styles/dialogue.css");
 @import url("../styles/image.css");
 @import url("../styles/input.css");
+@import url("../styles/toast.css");
 
 * {
   margin: 0;

diff --git a/styles/toast.css b/styles/toast.css
@@ -0,0 +1,43 @@
+.toast-container{
+    background-color: var(--text-color-black);
+    color: var(--body-background-color);
+    display: flex;
+    flex-direction: row;
+    padding: 1rem;
+    margin: 1rem;
+    width: fit-content;
+    border-radius: 0.6rem;
+}
+
+.toast-text{
+    margin-right: 1rem;
+    font-size: bold;
+}
+
+.retry{
+    cursor: pointer;
+    margin-right: 1rem;
+}
+
+.retry:hover{
+    color: var(--hover-color);
+}
+
+.toast-icon{
+    cursor: pointer;
+}
+
+.toast-icon:hover{
+    color: var(--hover-color);
+}
+
+.undo{
+    margin-left: 2rem;
+    margin-right: 1.8rem;
+}
+
+.toast-actions{
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+}