共享条自适应设计以及冷热关

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年定居新西兰至今,自由职业者。
本文采用知识共享署名 4.0 国际许可协议进行许可。简而言之,可随意转发转载,转载请注明出处。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解