Register
Login
Resources
Docs Blog Datasets Glossary Case Studies Tutorials & Webinars
Product
Data Engine LLMs Platform Enterprise
Pricing Explore
Connect to our Discord channel

#21 Make design aware to user sign up status

Merged
Dean Pleban merged 3 commits into DAGsHub-Official:main from DAGsHub-Official:sign-up-aware-menu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
  1. $(document).ready(function() {
  2. // 1. Create feedback button
  3. var button = '<div class="feedback-button">' +
  4. '<a href="https://DAGsHub.com/DAGsHub-Official/DAGsHub-Issues?utm_source=dagshub&utm_medium=feedbackButton&utm_campaign=feedbackButton">FEEDBACK</a>' +
  5. '<i class="minimize-feedback fas fa-angle-down"></i>' +
  6. '</div>';
  7. // 2. Append somewhere
  8. var body = $("body");
  9. body.append(button);
  10. // 3. Add styles
  11. $(".feedback-button a").css({
  12. 'color': '#fff',
  13. });
  14. $(".feedback-button i").css({
  15. 'padding-left': '7px',
  16. 'margin-left': '7px',
  17. 'border-left': '1px solid #fff',
  18. 'cursor': 'pointer'
  19. });
  20. var feedbackButton = $(".feedback-button");
  21. feedbackButton.css({
  22. 'background-color': '#59747A',
  23. 'color': '#fff',
  24. 'font-size': '15px',
  25. 'font-weight': '400',
  26. 'position': 'fixed',
  27. 'border-radius': '5px 5px 0 0',
  28. 'top': '40%',
  29. 'right': '-57px',
  30. 'padding': '10px 15px',
  31. 'transform': 'rotate(-90deg)',
  32. '-webkit-transform': 'rotate(-90deg)',
  33. 'letter-spacing': '2px',
  34. 'transition': 'right 400ms ease-in',
  35. 'z-index': '2000000'
  36. });
  37. var feedbackButtonChoiceStorageKey = 'dagshub-showFeedbackButtonChoice';
  38. if (localStorage.getItem(feedbackButtonChoiceStorageKey) !== 'hide') {
  39. feedbackButton.css({'right': '-57px',});
  40. } else {
  41. feedbackButton.css({'right': '-84px',});
  42. }
  43. feedbackButton.mouseenter(function() {
  44. localStorage.setItem(feedbackButtonChoiceStorageKey, 'show');
  45. $(this).css({
  46. 'background-color': '#103037',
  47. 'right': '-57px'
  48. }).mouseleave(function(){
  49. $(this).css({
  50. 'background-color': '#59747A'
  51. })
  52. })
  53. });
  54. // 4. Add minimize action
  55. $(".minimize-feedback").click(function() {
  56. localStorage.setItem(feedbackButtonChoiceStorageKey, 'hide');
  57. feedbackButton.css({
  58. 'right': '-84px'
  59. })
  60. });
  61. });
Discard
@@ -89,8 +89,8 @@ extra:
   social:
   social:
     - icon: fontawesome/brands/twitter
     - icon: fontawesome/brands/twitter
       link: https://twitter.com/TheRealDAGsHub
       link: https://twitter.com/TheRealDAGsHub
-    - icon: fontawesome/brands/facebook
-      link: https://www.facebook.com/DAGsHub/
+    - icon: fontawesome/brands/youtube
+      link: https://www.youtube.com/channel/UCeuZrCdpIY69XNWqn9OeSYQ
     - icon: fontawesome/brands/linkedin
     - icon: fontawesome/brands/linkedin
       link: https://www.linkedin.com/company/dagshub
       link: https://www.linkedin.com/company/dagshub
     - icon: fontawesome/brands/discord
     - icon: fontawesome/brands/discord
Discard
Some lines were truncated since they exceed the maximum allowed length of 500, please use a local Git client to see the full diff.
@@ -1,5 +1,5 @@
 :root {
 :root {
-    --roundness: 7px;
+    --roundness: 10px;
     --md-admonition-icon--checkpoint: url('data:image/svg+xml;charset=utf-8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="checkpoint" class="svg-inline--fa fa-checkpoint fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M243.2 189.9V258c26.1 5.9 49.3 15.6 73.6 22.3v-68.2c-26-5.8-49.4-15.5-73.6-22.2zm223.3-123c-34.3 15.9-76.5 31.9-117 31.9C296 98.8 251.7 64 184.3 64c-25 0-47.3 4.4-68 12 2.8-7.3 4.1-15.2 3.6-23.6C118
     --md-admonition-icon--checkpoint: url('data:image/svg+xml;charset=utf-8,<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="checkpoint" class="svg-inline--fa fa-checkpoint fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M243.2 189.9V258c26.1 5.9 49.3 15.6 73.6 22.3v-68.2c-26-5.8-49.4-15.5-73.6-22.2zm223.3-123c-34.3 15.9-76.5 31.9-117 31.9C296 98.8 251.7 64 184.3 64c-25 0-47.3 4.4-68 12 2.8-7.3 4.1-15.2 3.6-23.6C118
     --md-admonition-icon--illustration: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="video" class="svg-inline--fa fa-video fa-w-18" role="img" viewBox="0 0 576 512"><path fill="currentColor" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127
     --md-admonition-icon--illustration: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="video" class="svg-inline--fa fa-video fa-w-18" role="img" viewBox="0 0 576 512"><path fill="currentColor" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127
     --next-prev-button-bg: rgba(0, 0, 0, .1);
     --next-prev-button-bg: rgba(0, 0, 0, .1);
@@ -100,14 +100,16 @@
     }
     }
     .extra-links,
     .extra-links,
     .md-header-nav__button.md-logo,
     .md-header-nav__button.md-logo,
-    .md-tabs__item.cta.signup {
+    .md-tabs__item.cta.button {
         display: none !important;
         display: none !important;
     }
     }
+    .cta.button,
     .cta.signup {
     .cta.signup {
         margin: 10px 0;
         margin: 10px 0;
         border-bottom: 0;
         border-bottom: 0;
     }
     }
-    .cta.signup a {
+    .cta.button a,
+    .cta.signup a{
         padding: 6px 1.125em !important;
         padding: 6px 1.125em !important;
     }
     }
     .md-nav__item.submenu {
     .md-nav__item.submenu {
@@ -184,9 +186,6 @@
         margin-top: -1.5rem;
         margin-top: -1.5rem;
         padding-top: 1.5rem;
         padding-top: 1.5rem;
     }
     }
-    .md-header-nav {
-        max-width: 1130px;
-    }
     .md-header-nav__topic {
     .md-header-nav__topic {
         display: none;
         display: none;
     }
     }
@@ -194,7 +193,7 @@
         display: none;
         display: none;
     }
     }
     .extra-links {
     .extra-links {
-        line-height: 92px;
+        line-height: 77px;
     }
     }
     .extra-links a {
     .extra-links a {
         color: var(--md-header-text);
         color: var(--md-header-text);
@@ -210,7 +209,7 @@
     }
     }
     .md-header,
     .md-header,
     .md-flex {
     .md-flex {
-        height: 92px !important;
+        height: 77px !important;
     }
     }
     .md-tabs__list {
     .md-tabs__list {
         margin: 0;
         margin: 0;
@@ -220,7 +219,7 @@
         line-height: 14px;
         line-height: 14px;
         height: initial;
         height: initial;
         font-size: 14px;
         font-size: 14px;
-        margin: -1px 3px 0;
+        margin: 0 5px 0;
     }
     }
     .md-tab-active {
     .md-tab-active {
         border-radius: 4px;
         border-radius: 4px;
@@ -266,7 +265,12 @@
 .md-nav__link--active {
 .md-nav__link--active {
     font-weight: bold;
     font-weight: bold;
 }
 }
+nav.md-header-nav.md-grid {
+    max-width: unset;
+    padding: 0 1.4rem;
+}
 
 
+.cta.button,
 .cta.signup {
 .cta.signup {
     display: flex;
     display: flex;
     justify-content: center;
     justify-content: center;
@@ -287,6 +291,24 @@
 .cta.signup a:hover {
 .cta.signup a:hover {
     background-color: #16ab39;
     background-color: #16ab39;
 }
 }
+
+.cta.create-repo a {
+    background-color: transparent;
+    color: #2ecc40;
+    font-size: 14px;
+    text-shadow: none;
+    background-image: none;
+    font-weight: bold;
+    padding: 9px 1.125em;
+    border-radius: var(--roundness);
+    box-shadow: 0 0 0 2px #2ecc40 inset!important;
+    transition: background-color 100ms;
+}
+
+.cta.create-repo a:hover {
+    background-color: #2ecc40;
+    color: #fff;
+}
 /* Search */
 /* Search */
 .md-search__output {
 .md-search__output {
     border-radius: 0 0 var(--roundness) var(--roundness);
     border-radius: 0 0 var(--roundness) var(--roundness);
@@ -304,8 +326,8 @@
 }
 }
 
 
 .md-header-nav__button.md-logo {
 .md-header-nav__button.md-logo {
-    padding: 10px 11px;
-    margin: 0 5px 0 0;
+    padding: 10px 0px;
+    margin: 0 10px 0 0;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     justify-content: center;
     justify-content: center;
@@ -538,13 +560,45 @@
     line-height: 1.3;
     line-height: 1.3;
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
-    width: 160px;
+    width: 170px;
 }
 }
 
 
 .secondary-nav__button > a {
 .secondary-nav__button > a {
     width: 100%;
     width: 100%;
 }
 }
 
 
+/* Sign Up Status Content */
+body[data-md-signed-in='false'] .show-when-signed-out,
+body[data-md-signed-in='true'] .show-when-signed-in{
+    visibility: visible !important;
+}
+
+body[data-md-signed-in='true'] .show-when-signed-out,
+body[data-md-signed-in='false'] .show-when-signed-in {
+    display: none !important;
+    visibility: hidden !important;
+}
+
+#sign-up-toc.secondary-nav__button {
+    margin-top: 1.5rem;
+    border-radius: var(--roundness);
+    border: 1px solid var(--next-prev-button-border);
+    padding: 0.5rem;
+    background: var(--next-prev-button-bg);
+}
+
+#sign-up-toc.secondary-nav__button p{
+    margin: 0 0 0.5rem;
+}
+
+#sign-up-toc.md-button.secondary-nav__button > a {
+    background-color: #21ba45;
+    color: #fff;
+    font-weight: bold;
+    border: none;
+    min-width: 100%;
+}
+
 /* Discord Nav */
 /* Discord Nav */
 .discord {
 .discord {
     display: flex;
     display: flex;
Discard
@@ -5,6 +5,16 @@
           DARK_THEME = 'slate',
           DARK_THEME = 'slate',
           LIGHT_THEME = 'default';
           LIGHT_THEME = 'default';
 
 
+    const SIGN_IN_STATUS_COOKIE = 'dags_login_status',
+          SIGN_IN_STATUS_ATTRIBUTE = 'data-md-signed-in',
+          SIGNED_IN_STATUS = 'true',
+          SIGNED_OUT_STATUS = 'false';
+
+    const getCookie = (name) => {
+      let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+      if (match) return match[2];
+    };
+
     current_theme = localStorage.getItem(THEME_LOCAL_STORAGE_NAME);
     current_theme = localStorage.getItem(THEME_LOCAL_STORAGE_NAME);
     if (current_theme) {
     if (current_theme) {
         const attr = THEME_ATTRIBUTE;
         const attr = THEME_ATTRIBUTE;
@@ -14,6 +24,18 @@
     }
     }
 
 
     $(document).ready(() => {
     $(document).ready(() => {
+        // Handling Signed in status
+        if (getCookie(SIGN_IN_STATUS_COOKIE) === SIGNED_IN_STATUS) {
+            document.body.setAttribute(
+              SIGN_IN_STATUS_ATTRIBUTE,
+              SIGNED_IN_STATUS
+            );
+        } else {
+            document.body.setAttribute(
+                SIGN_IN_STATUS_ATTRIBUTE,
+                SIGNED_OUT_STATUS
+            );
+        }
         const attr = THEME_ATTRIBUTE;
         const attr = THEME_ATTRIBUTE;
         let darkmode_toggle = document.getElementById("dark-mode-toggle")
         let darkmode_toggle = document.getElementById("dark-mode-toggle")
         darkmode_toggle.addEventListener("click", function (e) {
         darkmode_toggle.addEventListener("click", function (e) {
@@ -54,6 +76,8 @@
                 <div class="md-grid">
                 <div class="md-grid">
                     <div>
                     <div>
                         <a class="md-tabs__item" href="/explore/repos/" title="Explore">Explore</a>
                         <a class="md-tabs__item" href="/explore/repos/" title="Explore">Explore</a>
+                        <a class="md-tabs__item show-when-signed-in" href="/issues/" title="Issues">Issues</a>
+                        <a class="md-tabs__item show-when-signed-in" href="/pulls/" title="Pull Requests">Pull Requests</a>
                         <div class="md-tabs__item dropdown">
                         <div class="md-tabs__item dropdown">
                             Resources &nbsp;&nbsp;<i class="fas fa-angle-down"></i>
                             Resources &nbsp;&nbsp;<i class="fas fa-angle-down"></i>
                             <div class="menu">
                             <div class="menu">
@@ -67,7 +91,7 @@
                                 <a class="item" href="/blog" title="Blog">Blog</a>
                                 <a class="item" href="/blog" title="Blog">Blog</a>
                             </div>
                             </div>
                         </div>
                         </div>
-                        <div class="md-tabs__item dropdown">
+                        <div class="md-tabs__item dropdown show-when-signed-out">
                             Company &nbsp;&nbsp;<i class="fas fa-angle-down"></i>
                             Company &nbsp;&nbsp;<i class="fas fa-angle-down"></i>
                             <div class="menu">
                             <div class="menu">
                                 <a class="item" href="/about/" title="Our Story">Our Story</a>
                                 <a class="item" href="/about/" title="Our Story">Our Story</a>
@@ -104,12 +128,18 @@
                     </label>
                     </label>
                     {% include "partials/search.html" %}
                     {% include "partials/search.html" %}
                 {% endif %}
                 {% endif %}
-                <div class="md-tabs__item cta button signup">
+                <div class="md-tabs__item cta button signup show-when-signed-out">
                     <a href="/user/sign_up">
                     <a href="/user/sign_up">
                         <i class="fas fa-user-plus"></i>
                         <i class="fas fa-user-plus"></i>
                         &nbsp;&nbsp;Sign Up
                         &nbsp;&nbsp;Sign Up
                     </a>
                     </a>
                 </div>
                 </div>
+                <div class="md-tabs__item cta create-repo button show-when-signed-in">
+                    <a href="/repo/create" title="Create a New Repository">
+                        <i class="fas fa-plus"></i>
+                        &nbsp;&nbsp;Create
+                    </a>
+                </div>
                 <div class="md-theme-toggle">
                 <div class="md-theme-toggle">
                     <div class="toggle-dark-mode-btn">
                     <div class="toggle-dark-mode-btn">
                         <div class="toggleWrapper" title="Toggle Dark Mode">
                         <div class="toggleWrapper" title="Toggle Dark Mode">
Discard
@@ -14,7 +14,6 @@
       integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
       integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
       crossorigin="anonymous" />
       crossorigin="anonymous" />
 <script src="/js/jquery-3.4.1.min.js"></script>
 <script src="/js/jquery-3.4.1.min.js"></script>
-<script src="/js/feedbackButton.js"></script>
 
 
 <!-- The image needs to have an absolute URL -->
 <!-- The image needs to have an absolute URL -->
 {% set image = config.site_url ~ 'assets/images/banner.png' %}
 {% set image = config.site_url ~ 'assets/images/banner.png' %}
Discard
@@ -49,15 +49,21 @@
         <nav class="extra-links-sidebar">
         <nav class="extra-links-sidebar">
             <div class="md-grid">
             <div class="md-grid">
                 <ul class="md-nav__list">
                 <ul class="md-nav__list">
-                    <li class="md-nav__item cta signup">
+                    <li class="md-nav__item cta signup show-when-signed-out">
                         <a href="/user/sign_up">
                         <a href="/user/sign_up">
                             <i class="fas fa-user-plus"></i>
                             <i class="fas fa-user-plus"></i>
                             &nbsp;&nbsp;Sign Up
                             &nbsp;&nbsp;Sign Up
                         </a>
                         </a>
                     </li>
                     </li>
-                    <li class="md-nav__item">
+                    <li class="md-nav__item show-when-signed-in">
                         <a href="/explore/repos/" title="Explore" class="md-nav__link">Explore</a>
                         <a href="/explore/repos/" title="Explore" class="md-nav__link">Explore</a>
                     </li>
                     </li>
+                    <li class="md-nav__item show-when-signed-in">
+                        <a href="/issues/" title="Issues" class="md-nav__link">Issues</a>
+                    </li>
+                    <li class="md-nav__item">
+                        <a href="/pulls/" title="Pull Requests" class="md-nav__link">Pull Requests</a>
+                    </li>
                     <li class="md-nav__item">
                     <li class="md-nav__item">
                         <a href="/docs/" title="Docs" class="md-nav__link">Docs</a>
                         <a href="/docs/" title="Docs" class="md-nav__link">Docs</a>
                     </li>
                     </li>
@@ -67,10 +73,10 @@
                     <li class="md-nav__item">
                     <li class="md-nav__item">
                         <a href="/blog" title="Blog" class="md-nav__link">Blog</a>
                         <a href="/blog" title="Blog" class="md-nav__link">Blog</a>
                     </li>
                     </li>
-                    <li class="md-nav__item">
+                    <li class="md-nav__item show-when-signed-out">
                         <a href="/about/" title="Our Story" class="md-nav__link">Our Story</a>
                         <a href="/about/" title="Our Story" class="md-nav__link">Our Story</a>
                     </li>
                     </li>
-                    <li class="md-nav__item">
+                    <li class="md-nav__item show-when-signed-out">
                         <a href="/careers/" title="Careers" class="md-nav__link">Careers</a>
                         <a href="/careers/" title="Careers" class="md-nav__link">Careers</a>
                     </li>
                     </li>
                 </ul>
                 </ul>
Discard
@@ -49,3 +49,9 @@
       <i class="fab fa-discord fa-lg"></i><span>Discord Chat</span>
       <i class="fab fa-discord fa-lg"></i><span>Discord Chat</span>
     </a>
     </a>
 </div>
 </div>
+<div id="sign-up-toc" class="md-button secondary-nav__button show-when-signed-out">
+  <p>Ready to build your own project? It's free</p>
+  <a href="/user/sign_up">
+    <i class="fas fa-user-plus fa-lg"></i><span>Sign Up</span>
+  </a>
+</div>
Discard