UI tweaks for 'See on Door43' button (#210)

* UI fixes for 'See on Door43' button * Spaces to tabs in _unfoldingWord.less
unfoldingWord · Jun 28, 2017 · c7382e4 · c7382e4
1 parent c5f70a4
commit c7382e4
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -3111,16 +3111,11 @@ table[data-table-type="yaml-metadata"] {
 .ui.user.list .item .description a:hover {
   text-decoration: underline;
 }
-.no-padding-button {
-  display: inline-flex;
-  padding: 0px !important;
-  margin: 0 .25em 0 0;
-}
-.door43-logo {
-  height: 20px;
-  width: 20px;
-  margin-top: -12px;
-  margin-bottom: -8px;
+#door43-logo {
+  height: 20px !important;
+  width: 20px !important;
+  margin-top: -10px !important;
+  margin-bottom: -10px !important;
   vertical-align: middle;
   display: inline-block;
 }
@@ -3131,3 +3126,7 @@ table[data-table-type="yaml-metadata"] {
 .empty-icon:before {
   content: "\200b";
 }
+.repo-button-separator {
+  display: inline-flex;
+  width: 5px;
+}
diff --git a/public/less/_unfoldingWord.less b/public/less/_unfoldingWord.less
@@ -1,23 +1,23 @@
 @door43-logo-size: 20px;
 
-.no-padding-button {
-    display: inline-flex;
-    padding: 0px !important;
+#door43-logo {
+	height: @door43-logo-size !important;
+	width: @door43-logo-size !important;
+	margin-top: -0.5* @door43-logo-size !important;
+	margin-bottom: -0.5 * @door43-logo-size !important;
+	vertical-align: middle;
+	display: inline-block;
 }
 
-.door43-logo {
-    height: @door43-logo-size;
-    width: @door43-logo-size;
-    margin-top: -0.6 * @door43-logo-size;
-    margin-bottom: -0.4 * @door43-logo-size;
-    vertical-align: middle;
-    display: inline-block;
+.empty-icon {
+	width: 0px !important;
+	margin: 0 0 0 0 !important;
+	&:before {
+		content: "\200b"; // zero-width space
+	}
 }
 
-.empty-icon {
-    width: 0px !important;
-    margin: 0 0 0 0 !important;
-    &:before {
-        content: "\200b"; // zero-width space
-    }
+.repo-button-separator {
+	display: inline-flex;
+	width: 5px;
 }
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
@@ -14,13 +14,16 @@
 					</div>
 
 					<div class="ui right">
-						<div class="no-padding-button" tabindex="0">
+						<div class="ui compact labeled button" id="see-on-door43-button" tabindex="0">
 							<a class="ui compact button" target="_blank" href="https://live.door43.org/u/{{.Owner.Name}}/{{.Name}}/">
 								<!-- empty icon ensures that this button is same size as Watch/Star/Fork buttons -->
-								<i class="icon empty-icon"></i>
-								<img class="door43-logo" src="/img/door43.png"/>
-								<span>{{$.i18n.Tr "repo.see_on_door43"}}</span>
+								<i class="icon empty-icon"></i><span>{{$.i18n.Tr "repo.see_on_door43"}}</span>
 							</a>
+							<a class="ui basic left pointing label" href="https://live.door43.org/u/{{.Owner.Name}}/{{.Name}}/">
+								&#xfeff;<img id="door43-logo" src="/img/door43.png"/>
+							</a>
+						</div>
+						<div class="repo-button-separator">
 						</div>
 						<div class="ui compact labeled button" tabindex="0">
 							<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">