共享條自適應設計以及冷熱關

2018-11-24 约 1567 字 预计阅读 4 分钟

之前寫個一個小帖子來介紹怎麼做左側共享條,我設計這個Hugo模板也采用了同樣的設計。

前兩天有一位國際友人在github上open了一個issue,說是需要修改一下這個共享條的自適應。因為我當時很簡單的處理了一下,當屏幕寬度小於1024px時,自動取消固定在左側的屬性,就放在屏幕下方。那長的就是這個樣子的。

enter image description here如果用手機瀏覽,倒也無所謂,但如果用ipad之類的瀏覽,這個共享按鈕就太大了。

我在github是新手上路,也不知道open一個issue是什麼意思。就等兩天看看。

今天一看這個issue已經關閉了,但似乎也沒有接到關於此處的修改,那我自己來吧。

共享條自適應設計

設置css

@media screen and (min-width: 1025px)
  {
  .icon-bar {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
  }  
  }
  
  @media screen and (max-width: 1024px) {
  .icon-bar {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right:auto;
    }
  .icon-bar a {
    float: left;
    width: 20%;
    text-align: center;
    padding: 12px 0;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
  }
   .bookmark { 
  border-radius: 36px   0px 0px 36px!important ;
}
 .linkedin {
   border-radius: 0px  36px 36px 0px!important;
  }
  }

  .icon-bar a:hover {
  background-color: #000;
  }
  .bookmark {
  background: #bb0000;
  color: white;
  border-radius: 36px 36px 0px 0px;
}
  .facebook {
  background: #3B5998;
  color: white;
  }
  .twitter {
  background: #55ACEE;
  color: white;
  }
  .google {
  background: #dd4b39;
  color: white;
  }
  .linkedin {
  background: #007bb5;
  color: white;
  border-radius: 0px 0px 36px 36px;
  }

用javascript生成共享按鈕

<script>
  shareurl=encodeURIComponent(location.protocol + '//' + location.host + location.pathname);
  sharetitle=encodeURIComponent(document.title);
    
  </script>
<div class="icon-bar">
<script>
document.write( '<a href="javascript:bookmark();" class="bookmark w3-tooltip"><i class="fa fa-bookmark"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green ">Bookmark this page</span></a> ');

document.write( '<a href="http://www.facebook.com/sharer.php?u='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="facebook w3-tooltip"><i class="fa fa-facebook "></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Facebook</span></a> ');

document.write( '<a href="https://twitter.com/share?url='+shareurl+'&text='+sharetitle+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="twitter w3-tooltip"><i class="fa fa-twitter"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Twitter</span></a> ');
document.write( '<a href="https://plus.google.com/share?url='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="google w3-tooltip"><i class="fa fa-google"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Google Plus</span></a>');

document.write( '<a href="http://www.linkedin.com/shareArticle?mini=true&url='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="linkedin w3-tooltip"><i class="fa fa-linkedin"></i><span style="position:absolute;left:40px;bottom:18px" class="w3-text w3-small w3-tag w3-round w3-green">Share to Linkedin</span></a>');

</script>

<script>
function bookmark(){
if ('sidebar' in window && 'addPanel' in window.sidebar) { 
                window.sidebar.addPanel(location.href,document.title,"");
            } else if( /*@cc_on!@*/false) {                 window.external.AddFavorite(location.href,document.title); 
            } else { 
                alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
            }
        }

</script>
</div>

更新了一下,發現按鈕橫放時,鼠標放在按鈕時的提示被旁邊的按鈕遮擋住了,這是因為我采用w3.css的w3-tooltip沒有考慮到這一節。那我就繼承修改一下這個w3-tooltip的css。加一句z-index: 1即可。

.w3-tooltip:hover .w3-text{z-index: 1;display:inline-block}

好了,自適應共享條就實現了,可以縮小屏幕看看效果。


通關文之冷熱關

老祖雲:“外其身而身存。”
文始雲:“冬禦風而不寒,夏禦火而不熱。”
呂祖雲:“求生而不生,未死先學死。”
此皆言其為道忘軀,而不避寒暑也。
夫修道者,先要看破幻化之身,置色身於度外。
死且不懼,何況冷熱?
故神光少林寺求法,雪擁過膝而不知;太古趙州橋冷坐,水淹將沒而不曉;釋迦佛雪山修道,受盡多少苦楚;長春祖磻溪磨性,受盡多少饑寒!
即近世白石鎮梁真人,破衣垢麵,長年不倒身,未曾歇息。
西寧府張睡仙,水泉長臥,赤身露體,四十餘年猶如一日。
梭羅仙河灘磨煉,狗皮仙冰灘睡眠,仙留師黃沙下苦,皆是不避冷熱,舍的色身,成的法身也。
世間糊塗學人,不知香從臭出,甜向苦來。
誤認色身為真實,而遂愛之惜之,隻圖自在將養。
遇冷而即想暖處,逢熱而即思涼處。
怕冷怕熱,隔絕道念。
卻不思性命為人生第一件大事,豈可因冷熱之小事而誤性命之大事乎?
果是真為性命者,即生死關口、大難境界,亦要脫脫灑灑過去。
至於寒暑冷熱,何足在意?
雖未成道之先,色身亦不可壞。
但粗衣護體,將就過去便休。
不必以冷熱常掛心頭。
遇冷時亦須受冷,逢熱時亦須受熱。
熱之冷之,與時偕行而已。
與時偕行,非是不該受冷一定教受冷,不該受熱一定教受熱。
若不該受冷而必欲受冷,不該受熱而必欲受熱,此有心做作,亦是固執不通,枉自受罪。何益於事?
大抵怕冷怕熱,雖是小節,甚礙於道。
倘有些兒冷熱之見,便有無限邪思妄想生出。
遇冷必設法要不冷,遇熱必設法要不熱。
認假失真,豈不誤了多也?
吾勸真心學道者,速將冷熱關口打通。
隨時將就,到處安身。
冷可也,熱可也,不至凍死熱死便休。
萬不因冷熱而起無明。
否則,有冷熱在心,心有所恐懼,則不得其正;有所憂患,則不得其正。
心且不得其正,妄想明道,難矣。

此關所言來自天時,以我本人經曆,並不易過。

熱時倒未有何關礙,有時冷時,站樁或安坐殊難以集中精神,如今細想之,大抵是因為運動時衣物較少,而守靜時衣物未增,故此無端多出一層關礙。

此關需要以與時偕行之原則過之,與時偕行本身也是天人合一之初始版本。


author

Jesse Lau

網名遁去的一,簡稱遁一。2012年定居新西蘭至今,自由職業者。手搓的GPTs
本文采用知識共享署名 4.0 國際許可協議進行許可。簡而言之,可隨意轉發轉載,轉載請注明出處。


留点评论吧: