Merge pull request #48 from starknet-io/toolbar-refactor2

LandauRaz · web-flow · commit 0e3fbe284528 · 2024-11-12T12:01:17.000-05:00
Refactored toolbar
diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip
diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css
@@ -1,7 +1,7 @@
 .breadcrumbs {
   display: none;
   flex: 1 1;
-  padding: 0 0.5rem 0 0.75rem;
+  padding-right: 0.5rem;
   line-height: var(--nav-line-height);
   color: var(--breadcrumbs-font-color);
 }
@@ -29,7 +29,7 @@ a + .breadcrumbs {
   margin: 0;
 }
 
-.breadcrumbs li::after {
+.breadcrumbs li::before {
   content: "/";
   padding: 0 0.5rem;
 }
diff --git a/src/css/extensions/custom-dark.css b/src/css/extensions/custom-dark.css
@@ -87,9 +87,10 @@
 } */
 
 .pencil {
-  /*
-  background-image: url(../img/pencil-filled.svg);
-  */
+  fill: var(--color-athens-white);
+}
+
+.heart {
   fill: var(--color-athens-white);
 }
 
diff --git a/src/css/extensions/custom.css b/src/css/extensions/custom.css
@@ -246,8 +246,17 @@
   background-repeat: no-repeat;
   height: 1rem;
   width: 1rem;
+  padding: 0 0.75rem;
+  vertical-align: text-bottom;
+}
+
+.heart {
+  background-image: url(../img/heart.svg);
+  background-repeat: no-repeat;
+  height: 1rem;
+  width: 1rem;
   padding: 0 1em;
-  vertical-align: middle;
+  vertical-align: text-bottom;
 }
 
 .navbar-end .navbar-item .navbar-dropdown {
@@ -274,7 +283,7 @@
 }
 
 .edit-this-page:hover a {
-  color: var(--color-ultramarine-blue);
+  /* color: var(--color-ultramarine-blue); */
   text-decoration: none;
 }
 
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
@@ -66,6 +66,7 @@
 @media screen and (min-width: 1024px) {
   .home-link {
     margin: calc(var(--toolbar-height) / 4);
+    margin-right: 0
   }
   .edit-this-page {
     display: block;
diff --git a/src/img/heart.svg b/src/img/heart.svg
@@ -0,0 +1,18 @@
+<svg
+	version="1.1"
+	id="Layer_1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	viewBox="0 0 122.88 109.57"
+	style="enable-background:new 0 0 122.88 109.57"
+	xml:space="preserve"
+>
+	<g>
+		<path
+			fill="#8A8CA2"
+			d="M65.46,19.57c-0.68,0.72-1.36,1.45-2.2,2.32l-2.31,2.41l-2.4-2.33c-0.71-0.69-1.43-1.4-2.13-2.09 c-7.42-7.3-13.01-12.8-24.52-12.95c-0.45-0.01-0.93,0-1.43,0.02c-6.44,0.23-12.38,2.6-16.72,6.65c-4.28,4-7.01,9.67-7.1,16.57 c-0.01,0.43,0,0.88,0.02,1.37c0.69,19.27,19.13,36.08,34.42,50.01c2.95,2.69,5.78,5.27,8.49,7.88l11.26,10.85l14.15-14.04 c2.28-2.26,4.86-4.73,7.62-7.37c4.69-4.5,9.91-9.49,14.77-14.52c3.49-3.61,6.8-7.24,9.61-10.73c2.76-3.42,5.02-6.67,6.47-9.57 c2.38-4.76,3.13-9.52,2.62-13.97c-0.5-4.39-2.23-8.49-4.82-11.99c-2.63-3.55-6.13-6.49-10.14-8.5C96.5,7.29,91.21,6.2,85.8,6.82 C76.47,7.9,71.5,13.17,65.46,19.57L65.46,19.57z M60.77,14.85C67.67,7.54,73.4,1.55,85.04,0.22c6.72-0.77,13.3,0.57,19.03,3.45 c4.95,2.48,9.27,6.1,12.51,10.47c3.27,4.42,5.46,9.61,6.1,15.19c0.65,5.66-0.29,11.69-3.3,17.69c-1.7,3.39-4.22,7.03-7.23,10.76 c-2.95,3.66-6.39,7.44-10,11.17C97.2,74.08,91.94,79.12,87.2,83.66c-2.77,2.65-5.36,5.13-7.54,7.29L63.2,107.28l-2.31,2.29 l-2.34-2.25l-13.6-13.1c-2.49-2.39-5.37-5.02-8.36-7.75C20.38,71.68,0.81,53.85,0.02,31.77C0,31.23,0,30.67,0,30.09 c0.12-8.86,3.66-16.18,9.21-21.36c5.5-5.13,12.97-8.13,21.01-8.42c0.55-0.02,1.13-0.03,1.74-0.02C46,0.48,52.42,6.63,60.77,14.85 L60.77,14.85z"
+		/>
+	</g>
+</svg>
diff --git a/src/js/vendor/custom.js b/src/js/vendor/custom.js
@@ -14,7 +14,7 @@
   }
 
   for (var i = 0; i < images.length; i++) {
-    if (!(images[i].classList.contains('copy-icon') || images[i].classList.contains('pencil') || hasParentClass(images[i],'overview-box'))){
+    if (!(images[i].classList.contains('copy-icon') || images[i].classList.contains('pencil') || images[i].classList.contains('heart') || hasParentClass(images[i],'overview-box'))){
       images[i].setAttribute('data-zoomable', 'true')
     }
   }
diff --git a/src/partials/breadcrumbs.hbs b/src/partials/breadcrumbs.hbs
@@ -1,11 +1,11 @@
 <nav class="breadcrumbs" aria-label="breadcrumbs">
   {{#if page.breadcrumbs}}
   <ul>
-    {{#with page.componentVersion}}
+    {{!-- {{#with page.componentVersion}}
     {{#if (and ./title (ne ./title @root.page.breadcrumbs.0.content))}}
     <li><a href="{{{relativize ./url}}}">{{{./title}}}</a></li>
     {{/if}}
-    {{/with}}
+    {{/with}} --}}
     {{#each page.breadcrumbs}}
     <li>
     {{~#if (and ./url (eq ./urlType 'internal'))~}}
diff --git a/src/partials/toolbar.hbs b/src/partials/toolbar.hbs
@@ -1,10 +1,10 @@
 <div class="toolbar" role="navigation">
   {{!-- {{> nav-toggle}} --}}
-  <div class="components-versions desktop-only">
+  {{!-- <div class="components-versions desktop-only"> --}}
     {{!-- {{> top-components}}
     <span></span>
     {{> page-versions}} --}}
-  </div>
+  {{!-- </div> --}}
   <span></span>
   <span></span>
   {{#with site.homeUrl}}
@@ -18,6 +18,9 @@
     </div>
   {{/if}}
   <div class="edit-this-page">
-    <a href="{{page.editUrl}}"><img class="pencil">Edit this Page</a>
+    <a href='https://github.com/starknet-io/starknet-docs/issues/new?assignees=landauraz&title=Feedback for "{{page.title}}"' target="_blank"><img class="heart">Share feedback</a>
+  </div>
+  <div class="edit-this-page">
+    <a href="{{page.editUrl}}" target="_blank"><img class="pencil">Edit content</a>
   </div>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.breadcrumbs {`
`2`	`2`	`display: none;`
`3`	`3`	`flex: 1 1;`
`4`		`- padding: 0 0.5rem 0 0.75rem;`
	`4`	`+ padding-right: 0.5rem;`
`5`	`5`	`line-height: var(--nav-line-height);`
`6`	`6`	`color: var(--breadcrumbs-font-color);`
`7`	`7`	`}`
`@@ -29,7 +29,7 @@ a + .breadcrumbs {`
`29`	`29`	`margin: 0;`
`30`	`30`	`}`
`31`	`31`
`32`		`-.breadcrumbs li::after {`
	`32`	`+.breadcrumbs li::before {`
`33`	`33`	`content: "/";`
`34`	`34`	`padding: 0 0.5rem;`
`35`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,7 @@`
`66`	`66`	`@media screen and (min-width: 1024px) {`
`67`	`67`	`.home-link {`
`68`	`68`	`margin: calc(var(--toolbar-height) / 4);`
	`69`	`+ margin-right: 0`
`69`	`70`	`}`
`70`	`71`	`.edit-this-page {`
`71`	`72`	`display: block;`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`for (var i = 0; i < images.length; i++) {`
`17`		`- if (!(images[i].classList.contains('copy-icon') \|\| images[i].classList.contains('pencil') \|\| hasParentClass(images[i],'overview-box'))){`
	`17`	`+ if (!(images[i].classList.contains('copy-icon') \|\| images[i].classList.contains('pencil') \|\| images[i].classList.contains('heart') \|\| hasParentClass(images[i],'overview-box'))){`
`18`	`18`	`images[i].setAttribute('data-zoomable', 'true')`
`19`	`19`	`}`
`20`	`20`	`}`