Fix Badge Overlapping And Icon

fossasia · Jan 16, 2019 · 047b033 · 047b033
1 parent 7ad1723
commit 047b033
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 73 deletions.
diff --git a/frontend/app/components/create-badge.js b/frontend/app/components/create-badge.js
@@ -10,16 +10,13 @@ export default Component.extend({
     EmberObject.$(window).bind('resize scroll', function(e) {
       var card = EmberObject.$(document)[0].getElementsByClassName('six wide column preview');
       if (card.length != 0) {
-        if (e.type === 'scroll' && this.scrollY >= 137 && this.window.innerWidth >= 764 && !(EmberObject.$(window).scrollTop() + EmberObject.$(window).height() > (EmberObject.$(document).height() - 100))) {
+        if (e.type === 'scroll' && this.scrollY >= 137 && this.window.innerWidth >= 764 && !(EmberObject.$(window).scrollTop() + EmberObject.$(window).height() > (EmberObject.$(document).height()))) {
           card[0].style.position = 'fixed';
           card[0].style.right = '0';
           card[0].style.top = '0';
-          EmberObject.$(document)[0].getElementsByClassName('bgImg ui raised segment')[0].style.height = '600px';
-        } else if (e.type === 'scroll' && this.window.innerWidth >= 764 && (EmberObject.$(window).scrollTop() + EmberObject.$(window).height() > (EmberObject.$(document).height() - 100))) {
-          card[0].style.position = 'fixed';
           EmberObject.$(document)[0].getElementsByClassName('bgImg ui raised segment')[0].style.height = '530px';
         } else {
-          EmberObject.$(document)[0].getElementsByClassName('bgImg ui raised segment')[0].style.height = '100%';
+          EmberObject.$(document)[0].getElementsByClassName('bgImg ui raised segment')[0].style.height = '530px';
           card[0].style.position = 'inherit';
         }
       }

diff --git a/frontend/app/styles/partials/footer-main.scss b/frontend/app/styles/partials/footer-main.scss
@@ -4,6 +4,10 @@ footer {
   background-color: $bkColor;
 }
 
+.ui.bottom.inverted.menu {
+  overflow: scroll;
+}
+
 @media only screen and (max-width: 600px) {
   .mobile-hide{
     display: none;

diff --git a/frontend/app/styles/partials/preview.scss b/frontend/app/styles/partials/preview.scss
@@ -1,6 +1,6 @@
 .bgImg {
   border-radius: 5px;
-  height: 600px;
+  height: 500px !important;
 }
 
 .preview.content {

diff --git a/frontend/app/templates/components/footer-main.hbs b/frontend/app/templates/components/footer-main.hbs
@@ -1,4 +1,4 @@
-{{!-- <footer>
+<footer>
     <div class="ui bottom inverted menu">
         <div class="left menu">
             {{#link-to 'sitemap' class='item'}}
@@ -17,71 +17,10 @@
         <div class="right menu">
             <strong class="item">Follow us on</strong>
             {{#each socialMedia as |media|}}
-            <a class="item" href={{media.link}} target="_blank">
-                <i class="{{media.id}} icon"></i>
-                <span class="mobile-hide">{{ first-cap media.id}}</span>
+            <a class="item ui icon button" href={{media.link}} data-tooltip={{media.id}} data-position="left center"  target="_blank">
+                <i class="{{media.icon}} icon"  ></i>
             </a>
             {{/each}}
         </div>
     </div>
 </footer>
---}}
-<div class="ui inverted vertical footer segment">
-    <div class="ui container" style="padding-top: 40px">
-        <div class="ui stackable inverted divided equal height stackable grid">
-            <div class="three wide column">
-                <h4 class="ui inverted header">
-                    About
-                </h4>
-                <div class="ui inverted link list">
-                    {{#link-to 'sitemap' class='item'}}
-                    {{init-cap 'sitemap'}}
-                    {{/link-to}}
-                    {{#link-to 'faq' class='item'}}
-                    {{init-cap 'faq'}}
-                    {{/link-to}}
-                </div>
-            </div>
-            <div class="seven wide column ">
-                <h4 class="ui inverted header">
-                    Our Other Projects
-                </h4>
-                <div class="ui grid">
-                    <div class="six wide column">
-
-                        <div class="ui inverted link list">
-                            <a class="item" href="https://fossasia.org/">Fossasia</a>
-                            <a class="item" href="https://loklak.org/">Loklak</a>
-                            <a class="item" href="https://chat.susi.ai/">SUSI</a>
-                            <a class="item" href="https://eventyay.com/">Eventyay</a>
-                            <a class="item" href="https://github.com/fossasia/neurolab-android">Neurolab</a>
-                        </div>
-                    </div>
-                    <div class="one wide column">
-
-                    </div>
-                    <div class="six wide column">
-                        <div class="ui inverted link list">
-                            <a class="item" href="https://pslab.io/">PSlab</a>
-                            <a class="item" href="https://meilix.org/">Meilix</a>
-                            <a class="item" href="https://phimp.me/">Phimp.me</a>
-                            <a class="item" href="http://dev.yaydoc.org/">Yaydoc</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="four wide column">
-                <h4 class="ui inverted header">
-                    Connect with Us
-                </h4>
-                <div class="ui inverted link list">
-                     {{#each socialMedia as |media|}}
-                    <a class="item" href={{media.link}} target="_blank">
-                        <i class="{{media.id}} icon"></i>{{ first-cap media.id}}
-                    </a>
-                    {{/each}}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/frontend/app/templates/components/user-component/preview.hbs b/frontend/app/templates/components/user-component/preview.hbs
@@ -3,7 +3,7 @@
         <div
             style="background-size: cover;
             background-repeat: no-repeat;
-            height: {{if previewHeight '105' '120'}}px;
+            height: {{if previewHeight '105' '110'}}px;
             color: #{{logoFontColor}};
             font-size: 60px;
             text-align: center;
@@ -18,11 +18,11 @@
             style="color: #{{defColor}};
             background-size: cover;
             background-repeat: no-repeat;
-            height: {{if previewHeight '370' '480'}}px;
+            height: {{if previewHeight '370' '390'}}px;
             background-color: #{{backColor}};
             background-image: {{if defImage "url('/images/badge_backgrounds/"}}{{if defImage defImageName}}{{if defImage fingerPrint}}{{if defImage ".png');"}}
                 {{if custImage 'url('}}{{if custImage backImg}}{{if custImage ');'}}">
-            <div class="preview content" style="padding-top: {{if previewHeight '45' '80'}}px">
+            <div class="preview content" style="padding-top: {{if previewHeight '45' '60'}}px">
                 <p
                 style="
                 font-size : {{rel font_fn}}px;