From 834730f09c760fdcb4e5862bd81d8af15d623d07 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Thu, 10 Oct 2019 15:32:22 +0200
Subject: [PATCH] Correct html syntax in styleguide

---
 scm-ui/ui-styles/public/index.html | 190 ++++++++++++++---------------
 1 file changed, 89 insertions(+), 101 deletions(-)
diff --git a/scm-ui/ui-styles/public/index.html b/scm-ui/ui-styles/public/index.html
index 89a20ae397..ce3aaf0ecc 100644
--- a/scm-ui/ui-styles/public/index.html
+++ b/scm-ui/ui-styles/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>SCM-Manager Style Guide</title>
+  <title>SCM-Manager Styleguide</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -18,7 +18,7 @@
     <div class="App">
       <section class="section">
         <div class="container">
-          <h1 class="title is-1">Style Guide SCM-Manager 2</h1>
+          <h1 class="title is-1">Styleguide SCM-Manager 2</h1>
           <div class="notification is-info"> <strong>Important:</strong> <br>
             This overview is focused on visual, not structural or functional aspects. It may contain class names not yet integrated in SCM-Manager and can only display the present state. There may be changes to some elements in the near future. <br>
           </div>
@@ -48,16 +48,16 @@
                 <code>.has-background-dark-75</code><br>
                 <code>.has-background-dark-50</code><br>
                 <code>.has-background-dark-25</code></td>
-              <td><span class="button has-background-dark"></span> <br>
+              <td><span class="button has-background-dark">&nbsp</span> <br>
                 <br>
                 #363636 </td>
-              <td><span class="button has-background-dark-75"></span> <br>
+              <td><span class="button has-background-dark-75">&nbsp</span> <br>
                 <br>
                 #686868 </td>
-              <td><span class="button has-background-dark-50"></span> <br>
+              <td><span class="button has-background-dark-50">&nbsp</span> <br>
                 <br>
                 #9a9a9a </td>
-              <td><span class="button has-background-dark-25"></span> <br>
+              <td><span class="button has-background-dark-25">&nbsp</span> <br>
                 <br>
                 #cdcdcd </td>
             </tr>
@@ -66,16 +66,16 @@
                 <code>.has-background-info-75</code><br>
                 <code>.has-background-info-50</code><br>
                 <code>.has-background-info-25</code></td>
-              <td><span class="button has-background-info"></span> <br>
+              <td><span class="button has-background-info">&nbsp</span> <br>
                 <br>
                 #33b2e8 </td>
-              <td><span class="button has-background-info-75"></span> <br>
+              <td><span class="button has-background-info-75">&nbsp</span> <br>
                 <br>
                 #66c5ee </td>
-              <td><span class="button has-background-info-50"></span> <br>
+              <td><span class="button has-background-info-50">&nbsp</span> <br>
                 <br>
                 #99d8f3 </td>
-              <td><span class="button has-background-info-25"></span> <br>
+              <td><span class="button has-background-info-25">&nbsp</span> <br>
                 <br>
                 #ccecf9 </td>
             </tr>
@@ -84,16 +84,16 @@
                 <code>.has-background-link-75</code><br>
                 <code>.has-background-link-50</code><br>
                 <code>.has-background-link-25</code></td>
-              <td><span class="button has-background-link"></span> <br>
+              <td><span class="button has-background-link">&nbsp</span> <br>
                 <br>
                 #33b2e8 </td>
-              <td><span class="button has-background-link-75"></span> <br>
+              <td><span class="button has-background-link-75">&nbsp</span> <br>
                 <br>
                 #66c5ee </td>
-              <td><span class="button has-background-link-50"></span> <br>
+              <td><span class="button has-background-link-50">&nbsp</span> <br>
                 <br>
                 #99d8f3 </td>
-              <td><span class="button has-background-link-25"></span> <br>
+              <td><span class="button has-background-link-25">&nbsp</span> <br>
                 <br>
                 #ccecf9 </td>
             </tr>
@@ -102,16 +102,16 @@
                 <code>.has-background-primary-75</code><br>
                 <code>.has-background-primary-50</code><br>
                 <code>.has-background-primary-25</code></td>
-              <td><span class="button has-background-primary"></span> <br>
+              <td><span class="button has-background-primary">&nbsp</span> <br>
                 <br>
                 #00d1df </td>
-              <td><span class="button has-background-primary-75"></span> <br>
+              <td><span class="button has-background-primary-75">&nbsp</span> <br>
                 <br>
                 #40dde7 </td>
-              <td><span class="button has-background-primary-50"></span> <br>
+              <td><span class="button has-background-primary-50">&nbsp</span> <br>
                 <br>
                 #7fe8ef </td>
-              <td><span class="button has-background-primary-25"></span> <br>
+              <td><span class="button has-background-primary-25">&nbsp</span> <br>
                 <br>
                 #bff3f7 </td>
             </tr>
@@ -120,16 +120,16 @@
                 <code>.has-background-success-75</code><br>
                 <code>.has-background-success-50</code><br>
                 <code>.has-background-success-25</code></td>
-              <td><span class="button has-background-success"></span> <br>
+              <td><span class="button has-background-success">&nbsp</span> <br>
                 <br>
                 #00c79b </td>
-              <td><span class="button has-background-success-75"></span> <br>
+              <td><span class="button has-background-success-75">&nbsp</span> <br>
                 <br>
                 #40d5b4 </td>
-              <td><span class="button has-background-success-50"></span> <br>
+              <td><span class="button has-background-success-50">&nbsp</span> <br>
                 <br>
                 #7fe3cd </td>
-              <td><span class="button has-background-success-25"></span> <br>
+              <td><span class="button has-background-success-25">&nbsp</span> <br>
                 <br>
                 #bff1e6 </td>
             </tr>
@@ -138,16 +138,16 @@
                 <code>.has-background-warning-75</code><br>
                 <code>.has-background-warning-50</code><br>
                 <code>.has-background-warning-25</code></td>
-              <td><span class="button has-background-warning"></span> <br>
+              <td><span class="button has-background-warning">&nbsp</span> <br>
                 <br>
                 #ffdd57 </td>
-              <td><span class="button has-background-warning-75"></span> <br>
+              <td><span class="button has-background-warning-75">&nbsp</span> <br>
                 <br>
                 #ffe681 </td>
-              <td><span class="button has-background-warning-50"></span> <br>
+              <td><span class="button has-background-warning-50">&nbsp</span> <br>
                 <br>
                 #ffeeab </td>
-              <td><span class="button has-background-warning-25"></span> <br>
+              <td><span class="button has-background-warning-25">&nbsp</span> <br>
                 <br>
                 #fff6d5 </td>
             </tr>
@@ -156,16 +156,16 @@
                 <code>.has-background-danger-75</code><br>
                 <code>.has-background-danger-50</code><br>
                 <code>.has-background-danger-25</code></td>
-              <td><span class="button has-background-danger"></span> <br>
+              <td><span class="button has-background-danger">&nbsp</span> <br>
                 <br>
                 #ff3860 </td>
-              <td><span class="button has-background-danger-75"></span> <br>
+              <td><span class="button has-background-danger-75">&nbsp</span> <br>
                 <br>
                 #ff6a88 </td>
-              <td><span class="button has-background-danger-50"></span> <br>
+              <td><span class="button has-background-danger-50">&nbsp</span> <br>
                 <br>
                 #ff9baf </td>
-              <td><span class="button has-background-danger-25"></span> <br>
+              <td><span class="button has-background-danger-25">&nbsp</span> <br>
                 <br>
                 #ffcdd7 </td>
             </tr>
@@ -230,14 +230,11 @@
           <div class="container">
             <nav class="tabs is-boxed">
               <ul>
-                <li class="is-active"><a href="#">Repositories</a></li>
-                <li class=""><a href="#">Users</a></li>
-                <li class=""><a href="#">Groups</a></li>
-                <li class=""><a href="#">Configuration</a></li>
-                <div>
-                  <li class=""><a href="#">Scripts</a></li>
-                </div>
-                <li class=""><a href="#">Logout</a></li>
+                <li><a href="#">Repositories</a></li>
+                <li><a href="#">Users</a></li>
+                <li><a href="#">Groups</a></li>
+                <li><a href="#">Administration</a></li>
+                <li><a href="#">Logout</a></li>
               </ul>
             </nav>
           </div>
@@ -264,17 +261,15 @@
             <div class="column is-one-quarter is-clipped">
               <aside class="menu">
                 <div>
-                  <p class="menu-label">Navigation</p>
+                  <p class="menu-label">Repository Navigation</p>
                   <ul class="menu-list">
-                    <li><a class="is-active" href="/scm/repo/scm-manager/scm-jenkins-plugin"><i class="fas fa-info-circle"></i> Information</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/changesets/"><i class="fas fa-code-branch"></i> Commits</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/sources"><i class="fas fa-code"></i> Sources</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/jira">Jira</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/webhook">Web Hooks</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/jenkins">Jenkins</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/redmine">Redmine</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/statistic"><i class="fas fa-chart-pie"></i> Statistics</a></li>
-                    <li><a class="" href="/scm/repo/scm-manager/scm-jenkins-plugin/permissions"><i class="fas fa-cog"></i> Settings</a></li>
+                    <li><a class="is-active" href="#"><i class="fas fa-info-circle fa-fw">&nbsp</i> Information</a></li>
+                    <li><a href="#"><i class="fas fa-code-branch fa-fw">&nbsp</i> Branches</a></li>
+                    <li><a href="#"><i class="fas fa-exchange-alt fa-fw">&nbsp</i> Commits</a></li>
+                    <li><a href="#"><i class="fas fa-code fa-fw">&nbsp</i> Sources</a></li>
+                    <li><a href="#"><i class="fas fa-code-branch fa-rotate-180 fa-fw">&nbsp</i> Pull Requests</a></li>
+                    <li><a href="#"><i class="fas fa-chart-pie fa-fw">&nbsp</i> Statistics</a></li>
+                    <li><a href="#"><i class="fas fa-cog fa-fw">&nbsp</i> Settings</a></li>
                   </ul>
                 </div>
               </aside>
@@ -390,8 +385,8 @@
           <h5>Button group</h5>
           <br>
           <div class="field is-grouped">
-            <p class="control"> <a class="button is-primary"> <span class="icon"><i class="fas fa-plus"></i></span>&nbsp;&nbsp;Add Admin Group </a> </p>
-            <p class="control"> <a class="button is-warning"> <span class="icon"><i class="fa fa-times"></i></span>&nbsp;&nbsp;Delete Admin Group</a></p>
+            <p class="control"> <a class="button is-primary"> <span class="icon"><i class="fas fa-plus">&nbsp</i></span>&nbsp;&nbsp;Add Admin Group </a> </p>
+            <p class="control"> <a class="button is-warning"> <span class="icon"><i class="fa fa-times">&nbsp</i></span>&nbsp;&nbsp;Delete Admin Group</a></p>
           </div>
           <br>
           <br>
@@ -471,10 +466,10 @@
               <div class="level-item">
                 <div class="field is-grouped">
                   <p class="control">
-                    <button type="button" class="button is-primary"> <span class="icon"><i class="fa fa-plus"></i></span>&nbsp;&nbsp;Add</button>
+                    <button type="button" class="button is-primary"> <span class="icon"><i class="fa fa-plus">&nbsp</i></span>&nbsp;&nbsp;Add</button>
                   </p>
                   <p class="control">
-                    <button type="button" class="button is-warning"> <span class="icon"><i class="fa fa-times"></i></span>&nbsp;&nbsp;Delete</button>
+                    <button type="button" class="button is-warning"> <span class="icon"><i class="fa fa-times">&nbsp</i></span>&nbsp;&nbsp;Delete</button>
                   </p>
                 </div>
               </div>
@@ -522,7 +517,8 @@
                     <div class="is-pulled-right">
                       <div class="field is-grouped">
                         <p class="control"> <button class="button is-warning" href="#">Yes</button></p>
-                        <p class="control">          <button class="button" href="#">No</button></p></div>
+                        <p class="control"> <button class="button" href="#">No</button></p>
+                      </div>
                     </div>
                   </div>
 
@@ -535,7 +531,7 @@
           <div class="modal-card">
             <header class="modal-card-head">
               <p class="modal-card-title has-text-danger">Cannot be merged automatically</p>
-              <button class="delete" aria-label="close"></button>
+              <button class="delete" aria-label="close">&nbsp</button>
             </header>
             <section class="modal-card-body">
               <div class="content">
@@ -601,21 +597,21 @@
               </thead>
               <tbody>
               <tr>
-                <td class="is-hidden-mobile"><a href="/scm/user/anonymous">anonymous</a></td>
-                <td><a href="/scm/user/anonymous">SCM Anonymous</a></td>
-                <td><a href="mailto: scm-anonymous@scm-manager.org">scm-anonymous@scm-manager.org</a></td>
+                <td class="is-hidden-mobile"><a href="#">anonymous</a></td>
+                <td><a href="#">SCM Anonymous</a></td>
+                <td><a href="#">scm-anonymous@scm-manager.org</a></td>
                 <td class="is-hidden-mobile"><input type="checkbox" id="admin1" readonly=""></td>
               </tr>
               <tr>
-                <td class="is-hidden-mobile"><a href="/scm/user/dhuchthausen">dhuchthausen</a></td>
-                <td><a href="/scm/user/dhuchthausen">Daniel Huchthausen</a></td>
-                <td><a href="mailto: daniel.huchthausen@cloudogu.com">daniel.huchthausen@cloudogu.com</a></td>
+                <td class="is-hidden-mobile"><a href="#">dhuchthausen</a></td>
+                <td><a href="#">Daniel Huchthausen</a></td>
+                <td><a href="#">daniel.huchthausen@cloudogu.com</a></td>
                 <td class="is-hidden-mobile"><input type="checkbox" id="admin2" readonly=""></td>
               </tr>
               <tr class="is-admin">
-                <td class="is-hidden-mobile"><a href="/scm/user/fscholdei">fscholdei</a></td>
-                <td><a href="/scm/user/fscholdei">Florian Scholdei</a></td>
-                <td><a href="mailto: florian.scholdei@cloudogu.com">florian.scholdei@cloudogu.com</a></td>
+                <td class="is-hidden-mobile"><a href="#">fscholdei</a></td>
+                <td><a href="#">Florian Scholdei</a></td>
+                <td><a href="#">florian.scholdei@cloudogu.com</a></td>
                 <td class="is-hidden-mobile"><input type="checkbox" id="admin3" readonly="" checked=""></td>
               </tr>
               </tbody>
@@ -631,7 +627,7 @@
                 <div class="field">
                   <label class="label">
                     Realm Description
-                    <div class="tooltip is-tooltip-right t-tooltip-0-1-10" data-tooltip="Enter authentication realm description"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                    <span class="tooltip is-tooltip-right t-tooltip-0-1-10" data-tooltip="Enter authentication realm description"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                   </label>
                   <div class="control">
                     <input class="input" type="text" placeholder="" value="SONIA :: SCM Manager">
@@ -642,7 +638,7 @@
                 <div class="field">
                   <label class="label">
                     Date Format
-                    <div class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Moments date format. Please have a look at the momentjs documentation."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                    <span class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Moments date format. Please have a look at the momentjs documentation."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                   </label>
                   <div class="control">
                     <input class="input" type="text" placeholder="" value="YYYY-MM-DD HH:mm:ss">
@@ -655,7 +651,7 @@
                 <div class="field">
                   <label class="label">
                     Plugin URL
-                    <div class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="The url of the plugin repository. Explanation of the placeholders: version = SCM-Manager Version; os = Operation System; arch = Architecture"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                    <span class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="The url of the plugin repository. Explanation of the placeholders: version = SCM-Manager Version; os = Operation System; arch = Architecture"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                   </label>
                   <div class="control">
                     <input class="input" type="text" placeholder="" value="http://plugins.scm-manager.org/scm-plugin-backend/api/{version}/plugins?os={os}&amp;arch={arch}&amp;snapshot=false">
@@ -666,7 +662,7 @@
                 <div class="field">
                   <label class="label">
                     Default Namespace Strategy
-                    <div class="tooltip is-tooltip-right t-tooltip-0-1-10" data-tooltip="The default namespace strategy"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                    <span class="tooltip is-tooltip-right t-tooltip-0-1-10" data-tooltip="The default namespace strategy"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                   </label>
                   <div class="control">
                     <input class="input" type="text" placeholder="" value="sonia.scm.repository.DefaultNamespaceStrategy">
@@ -681,7 +677,7 @@
                     <label class="checkbox">
                       <input type="checkbox" checked="">
                       Enabled XSRF Protection
-                      <div class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Enable Xsrf Cookie Protection. Note: This feature is still experimental."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                      <span class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Enable Xsrf Cookie Protection. Note: This feature is still experimental."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                     </label>
                   </div>
                 </div>
@@ -692,7 +688,7 @@
                     <label class="checkbox">
                       <input type="checkbox">
                       Enable Repository Archive
-                      <div class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Enable repository archives. A complete page reload is required after a change of this value."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                      <span class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Enable repository archives. A complete page reload is required after a change of this value."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                     </label>
                   </div>
                 </div>
@@ -705,7 +701,7 @@
                     <label class="checkbox">
                       <input type="checkbox">
                       Disable Grouping Grid
-                      <div class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Disable repository Groups. A complete page reload is required after a change of this value."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                      <span class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Disable repository Groups. A complete page reload is required after a change of this value."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                     </label>
                   </div>
                 </div>
@@ -716,7 +712,7 @@
                     <label class="checkbox">
                       <input type="checkbox">
                       Anonymous Access Enabled
-                      <div class="tooltip is-tooltip-right t-tooltip-0-1-10" data-tooltip="Anonymous users have read access on public repositories."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                      <span class="tooltip is-tooltip-right t-tooltip-0-1-10" data-tooltip="Anonymous users have read access on public repositories."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                     </label>
                   </div>
                 </div>
@@ -729,7 +725,7 @@
                     <label class="checkbox">
                       <input type="checkbox">
                       Skip Failed Authenticators
-                      <div class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Do not stop the authentication chain, if an authenticator finds the user but fails to authenticate the user."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11"></i></div>
+                      <span class="tooltip is-tooltip-right is-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Do not stop the authentication chain, if an authenticator finds the user but fails to authenticate the user."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
                     </label>
                   </div>
                 </div>
@@ -788,7 +784,7 @@
           <br>
           <h3 class="subtitle is-4">Tags</h3>
           <div class="notification">Tags can use background in all full base colors. </div>
-          <span class="tag is-info"><span class="fa fa-tag t-spacing-0-1-14"></span> tip</span> <span class="tag is-success">OPEN</span>  <span class="tag is-danger">Warning</span>
+          <span class="tag is-info"><span class="fa fa-tag t-spacing-0-1-14">&nbsp</span> tip</span> <span class="tag is-success">OPEN</span>  <span class="tag is-danger">Warning</span>
           <br><br>
 
           <br>
@@ -802,21 +798,21 @@
           <div class="columns">
             <div class="column is-one-third">
               <div class="notification is-primary">
-                <button class="delete"></button>
+                <button class="delete">&nbsp</button>
                 <strong>Primary/Success</strong><br>
                 Primar lorem ipsum dolor sit amet, consectetur
                 adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
             </div>
             <div class="column is-one-third">
               <div class="notification is-info">
-                <button class="delete"></button>
+                <button class="delete">&nbsp</button>
                 <strong>Info/Link</strong><br>
                 Primar lorem ipsum dolor sit amet, consectetur
                 adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
             </div>
             <div class="column is-one-third">
               <div class="notification is-success">
-                <button class="delete"></button>
+                <button class="delete">&nbsp</button>
                 <strong>Success</strong><br>
                 Primar lorem ipsum dolor sit amet, consectetur
                 adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
@@ -825,14 +821,14 @@
           <div class="columns">
             <div class="column is-one-third">
               <div class="notification is-warning">
-                <button class="delete"></button>
+                <button class="delete">&nbsp</button>
                 <strong>Warning</strong><br>
                 Primar lorem ipsum dolor sit amet, consectetur
                 adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
             </div>
             <div class="column is-one-third">
               <div class="notification is-danger">
-                <button class="delete"></button>
+                <button class="delete">&nbsp</button>
                 <strong>Danger</strong><br>
                 Primar lorem ipsum dolor sit amet, consectetur
                 adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.</div>
@@ -852,10 +848,10 @@
             <article class="media">
               <p class="image is-64x64 Translate(s)-spacing-0-1-8"><img class="has-rounded-border" src="https://gravatar.com/avatar/2f4a8735d6647f76e8a725b3d4987de5?size=64&amp;default=identicon" alt="Sebastian Sdorra"></p>
               <div class="media-content">
-                <p><strong>Sebastian Sdorra</strong> <a class="is-hidden-mobile" href="mailto:s.sdorra@gmail.com"><span class="tag">s.sdorra@gmail.com</span></a></p>
+                <p><strong>Sebastian Sdorra</strong> <a class="is-hidden-mobile" href="#">s.sdorra@gmail.com</a></p>
                 <p class="has-text-grey"><span>Changeset e7468dd was committed <span>2 months ago</span></span></p>
               </div>
-              <div class="media-right"></div>
+              <div class="media-right">&nbsp</div>
             </article>
             <p><span><br>
               </span></p>
@@ -879,10 +875,10 @@
                     <div class="media-content">
                       <h1 class="title">#1 Merge-Conflicts</h1>
                     </div>
-                    <a class="media-right"><span class="icon is-small"><a class="button is-small" href="/scm/repo/msuewer/test-repo/pull-request/1/edit"><i class="fas fa-edit"></i>&nbsp;Edit pull request</a></span></a></div>
+                    <a class="media-right"><span class="icon is-small"><a class="button is-small" href="#"><i class="fas fa-edit">&nbsp</i>&nbsp;Edit pull request</a></span></a></div>
                   <div class="Translate(o)-borderTop-0-1-10 media">
                     <div class="media-content">
-                      <div><span class="tag is-light is-medium" title="feature/e"><span class="Translate(o)-tagShorter-0-1-9">feature/e</span></span> <i class="fas fa-long-arrow-alt-right"></i> <span class="tag is-light is-medium" title="master"><span class="Translate(o)-tagShorter-0-1-9">master</span></span></div>
+                      <div><span class="tag is-light is-medium" title="feature/e"><span class="Translate(o)-tagShorter-0-1-9">feature/e</span></span> <i class="fas fa-long-arrow-alt-right">&nbsp</i> <span class="tag is-light is-medium" title="master"><span class="Translate(o)-tagShorter-0-1-9">master</span></span></div>
                     </div>
                     <div class="media-right tag is-success is-medium">OPEN</div>
                   </div>
@@ -906,8 +902,8 @@
                     <div class="tabs">
                       <ul>
                         <li class="is-active"><a href="#">Comments</a></li>
-                        <li class=""><a href="#">Commits</a></li>
-                        <li class=""><a href="#">Diff</a></li>
+                        <li><a href="#">Commits</a></li>
+                        <li><a href="#">Diff</a></li>
                       </ul>
                     </div>
                     <article class="media">
@@ -919,7 +915,7 @@
                         </div>
                       </div>
                       <div class="media-right">
-                        <div class="level-right"><a class="level-item"><span class="icon is-small"><i class="fas fa-trash"></i></span></a><a class="level-item"><span class="icon is-small"><i class="fas fa-edit"></i></span></a></div>
+                        <div class="level-right"><a class="level-item"><span class="icon is-small"><i class="fas fa-trash">&nbsp</i></span></a><a class="level-item"><span class="icon is-small"><i class="fas fa-edit">&nbsp</i></span></a></div>
                       </div>
                     </article>
                     <article class="media">
@@ -931,23 +927,19 @@
                         </div>
                       </div>
                       <div class="media-right">
-                        <div class="level-right"><a class="level-item"><span class="icon is-small"><i class="fas fa-trash"></i></span></a><a class="level-item"><span class="icon is-small"><i class="fas fa-edit"></i></span></a></div>
+                        <div class="level-right"><a class="level-item"><span class="icon is-small"><i class="fas fa-trash">&nbsp</i></span></a><a class="level-item"><span class="icon is-small"><i class="fas fa-edit">&nbsp</i></span></a></div>
                       </div>
                     </article>
                     <article class="media">
                       <div class="media-content">
-                        <div class="field">
-                          <p class="control">
                           <div class="field">
                             <div class="control">
-                              <textarea class="textarea" placeholder="Add comment"></textarea>
+                              <textarea class="textarea" placeholder="Add comment">&nbsp</textarea>
                             </div>
-                          </div>
-                          </p>
                         </div>
                         <div class="field">
                           <p class="control has-text-right">
-                            <button type="submit" class="button is-primary"><span class="icon"><i class="fa fa-plus"></i></span>&nbsp;&nbsp;Add comment</button>
+                            <button type="submit" class="button is-primary"><span class="icon"><i class="fa fa-plus">&nbsp</i></span>&nbsp;&nbsp;Add comment</button>
                           </p>
                         </div>
                       </div>
@@ -965,11 +957,11 @@
             <tr>
               <td>Members
                 <ul>
-                  <li><a href="/scm/user/sdorra">sdorra</a></li>
-                  <li><a href="/scm/user/pczora">pczora</a></li>
-                  <li><a href="/scm/user/pfeuffer">pfeuffer</a></li>
-                  <li><a href="/scm/user/ischindler">ischindler</a></li>
-                  <li><a href="/scm/user/mkarray">mkarray</a></li>
+                  <li><a href="#">sdorra</a></li>
+                  <li><a href="#">pczora</a></li>
+                  <li><a href="#">pfeuffer</a></li>
+                  <li><a href="#">ischindler</a></li>
+                  <li><a href="#">mkarray</a></li>
                 </ul></td>
             </tr>
             </tbody>
@@ -983,9 +975,5 @@
 <script src="js/scm-ui.js"></script>
 <script src="js/vendor.js"></script>
 <script src="js/polyfills.js"></script>
-<script>function() {
-    var target = $el.dataset.target;
-    openModal(target);
-}</script>
 </body>
 </html>
