diff options
| -rw-r--r-- | app/views/dashboard/show.html.tmpl | 39 | ||||
| -rw-r--r-- | public/application.js | 2 | ||||
| -rw-r--r-- | public/index.html | 40 |
3 files changed, 78 insertions, 3 deletions
diff --git a/app/views/dashboard/show.html.tmpl b/app/views/dashboard/show.html.tmpl index 3a29dd3..527db77 100644 --- a/app/views/dashboard/show.html.tmpl +++ b/app/views/dashboard/show.html.tmpl @@ -16,6 +16,17 @@ </header> <main id="app" class="container"> + <div class="grid"> + <div> </div> + <div> + <hgroup> + <h2>Share your gratitude</h2> + <p>Sparkle someone with praise</p> + </hgroup> + </div> + <div> </div> + </div> + <form v-on:submit.prevent="submitSparkle"> <label>/sparkle <input type="text" placeholder="@tanuki for helping me with my homework!" v-model="sparkle" pattern="\s*(?<sparklee>@\w+)\s+(?<reason>.+)" required /> </label> <button type="submit" v-bind:disabled="isDisabled">✨ Sparkle</button> @@ -34,4 +45,32 @@ </article> </main> </body> + + <footer> + <div class="container"> + <div class="grid"> + <div> + <p> <strong>Why?</strong> </p> + <small> SparkleLab is a lightweight service designed to explore modern access control models within GitLab, while doing something fun: helping GitLab team members show appreciation for each other. </small> + </div> + <aside> + <nav> + <ul> + <li> <strong>About</strong> </li> + <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled#-sparklelab" class="secondary">README</a></li> + </ul> + </nav> + </aside> + <aside> + <nav> + <ul> + <li><strong>Contribute</strong></li> + <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled" class="secondary">Code</a></li> + <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled/-/issues " class="secondary">Issues</a></li> + </ul> + </nav> + </aside> + </div> + </div> + </footer> </html> diff --git a/public/application.js b/public/application.js index ba478a8..7c27a6b 100644 --- a/public/application.js +++ b/public/application.js @@ -14,7 +14,7 @@ document.addEventListener('DOMContentLoaded', (event) => { }, computed: { heading: function() { - return this.sparkles.length == 0 ? "No Sparkles Sent" : "Recent Sparkles"; + return this.sparkles.length == 0 ? "Nothing to see here" : "Recent"; }, recentSparkles: function() { return this.sparkles.reverse(); diff --git a/public/index.html b/public/index.html index c918c7e..f35ab5d 100644 --- a/public/index.html +++ b/public/index.html @@ -16,7 +16,17 @@ </header> <main id="app" class="container"> - <h1>${ heading }</h1> + <div class="grid"> + <div> </div> + <div> + <hgroup> + <h2>Share your gratitude</h2> + <p>Sparkle someone with praise</p> + </hgroup> + </div> + <div> </div> + </div> + <article v-for="sparkle in recentSparkles"> <header> <img :src="sparkle.author.picture" :alt="sparkle.author.username"> @@ -28,6 +38,32 @@ </article> </main> - <footer></footer> + <footer> + <div class="container"> + <div class="grid"> + <div> + <p> <strong>Why?</strong> </p> + <small> SparkleLab is a lightweight service designed to explore modern access control models within GitLab, while doing something fun: helping GitLab team members show appreciation for each other. </small> + </div> + <aside> + <nav> + <ul> + <li> <strong>About</strong> </li> + <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled#-sparklelab" class="secondary">README</a></li> + </ul> + </nav> + </aside> + <aside> + <nav> + <ul> + <li><strong>Contribute</strong></li> + <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled" class="secondary">Code</a></li> + <li><a href="https://gitlab.com/gitlab-org/software-supply-chain-security/authorization/sparkled/-/issues " class="secondary">Issues</a></li> + </ul> + </nav> + </aside> + </div> + </div> + </footer> </body> </html> |