#1410首页适配移动端

Signed-off-by: zouap <zouap@pcl.ac.cn>

custom/public/css/git.openi.css

@@ -44,6 +44,12 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+.ui.label{
+  font-weight: normal;
+}
+.active {
+  color: #0366D6 !important;
+}
 
 .opacity5{ opacity:0.5;}
 .radius15{ border-radius:1.5rem !important; } 
@@ -252,6 +258,11 @@
 .homeorg-list .card .ui.small.header .content{
   width: calc(100% - 3.25em);
 }
+.homepro-tit{
+  background: #FFF;
+  z-index: 9;
+  position: relative;
+}
 .homepro-list{
   position: relative;
   z-index: 9;
@@ -261,8 +272,8 @@
 .homepro-list .ui.card{
   border-radius: 15px;
   background-color: #FFF;
-  box-shadow: 0px 5px 10px 0px rgba(105, 192, 255, 30);
-  border: 1px solid rgba(105, 192, 255, 40);
+  box-shadow: 0px 5px 10px 0px rgba(105, 192, 255, .3);
+  border: 1px solid rgba(105, 192, 255, .4);
   min-height: 10.8em;
 }
 .homepro-list .ui.card>.content>.header{
@@ -277,26 +288,134 @@
   position: relative;
 }
 
+/**seach**/
+/**搜索导航条适配窄屏**/
+.seachnav{
+  overflow-x: auto;   
+  overflow-y: hidden;  
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+.seachnav::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+.ui.green.button, .ui.green.buttons .button{
+	background-color: #5BB973;
+}
+.seach .repos--seach{
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.seach .ui.secondary.pointing.menu{
+  border-bottom: none;
+}
+.seach .ui.secondary.pointing.menu .item > i{
+  margin-right: 5px;
+}
+.seach .ui.secondary.pointing.menu .active.item{
+  border-bottom-width: 2px;
+  margin: 0 0 -1px;
+}
+.seach .ui.menu .active.item>.label {
+  background: #1684FC;
+  color: #FFF;
+}
+.seach .ui.menu .item>.label:not(.active.item>.label) {
+  background: #e8e8e8;
+  color: rgba(0,0,0,.6);
+}
+
+.highlight{
+  color: red;
+}
+.ui.list .list>.item>img.image+.content, .ui.list>.item>img.image+.content {
+  width: calc(100% - 3.0em);
+  margin-left: 0;
+}
+
+.seach .ui.list .list>.item .header, .seach .ui.list>.item .header{
+  margin-bottom: 0.5em;
+  font-size: 1.4rem !important;
+  font-weight: normal;
+}
+.seach .time, .seach .time a{
+  font-size: 12px;
+  color: grey;
+}
+
+.seach .list .item.members .ui.avatar.image {
+  width: 3.2em;
+  height: 3.2em;
+}
+.ui.list .list>.item.members>img.image+.content, .ui.list>.item.members>img.image+.content {
+  width: calc(100% - 4.0em);
+  margin-left: 0;
+}
+
 @media only screen and (max-width: 767px) {
   .am-mt-30{ margin-top: 1.5rem !important;}
   .ui.secondary.hometop.segment{
-    margin-bottom: 2.0rem;
+    margin-bottom: 5.0rem;
   }
-  .bannerpic, .i-code-pic{
+  .bannerpic{
     display: none;
   }
-  .i-code h2::before {
-    left: calc(-5.0rem + 6px);
+  #homenews{
+    bottom: -3em;
   }
-  .i-code h2.am-bw::before{
-    left: calc(-4.0rem + 6px);
+  #homenews > p {
+    margin-left: 1.0em;
+  }
+  .homenews{
+    padding-left: 1.3em !important;
+    border-radius: 1.5em;
+  }
+  .homenews::before{
+    left: 2em;
+  }
+  .homeorg{
+    padding-left: 3.5em;
+  }
+  .homeorg-tit::after {
+    left: -2.3em;
+  }
+  .homeorg-list{
+    margin: 0 0 2.0em !important;
+  }
+  .homeorg-list > .column{
+    width: 3em !important;
+    margin-left: -0.5em;
+    padding: 0.5rem 0 0 !important;
+  }
+  .homeorg-list .card{
+    background: none !important;
+  }
+  .homeorg-list .card > .content{
+    padding: 0 !important;
+  }
+  
+  .homeorg-list > .column .card .ui.header>img{
+    width: 3.0em;
+    height: 3.0em;
+    border-radius: 2.0em;
+    border: 2px solid #FFF;
+  }
+  .homeorg-list > .column .card .ui.header > .content{
+    display: none;
   }
   .leftline01{
-    width: calc(50% - 4.0rem);
+    width: 4.0em;
+    bottom: 4em;
+    border-radius: 0 0 0 3.0em;
+  }
+  .leftline02, .leftline02-2{
+    left: 6.0em;
+    top: calc(-4.0em - 2px);
+    border-radius: 0 3.0em 3.0em 0;
+    width: calc(50% - 6.0em);
   }
-  .leftline02{
-    left: calc(50% - 1.0rem);
-    top: calc(-3.5rem - 2px);
+  .leftline02-2 {
+    width: calc(50% - 8.0em);
   }
 }
 

public/home/home.js

@@ -17,7 +17,7 @@ var swiperNewMessage = new Swiper(".newslist", {
     },
 });
 var swiperRepo = new Swiper(".homepro-list", {
-    slidesPerView: 3,
+    slidesPerView: 1,
     slidesPerColumn: 2,
     slidesPerColumnFill:'row',
     spaceBetween: 30,
@@ -29,6 +29,14 @@ var swiperRepo = new Swiper(".homepro-list", {
         delay: 2500,
         disableOnInteraction: false,
     },
+    breakpoints: {
+        768: {
+            slidesPerView: 2,
+        },
+        1024: {
+            slidesPerView: 3,
+        },
+    },
 });
 
 var output = document.getElementById("newmessage");

templates/home.tmpl

@@ -20,7 +20,7 @@
             <div id="homenews" class="ui container">
                 <p>* {{.page_only_dynamic}}</p>
                 <div class="ui grid">
-                    <div class="twelve wide tablet ten wide computer column homenews">
+                    <div class="sixteen wide mobile twelve wide tablet ten wide computer column homenews">
                         <div class="newslist">
                             <div class="ui mini aligned list swiper-wrapper" id="newmessage">
                                 
@@ -42,7 +42,7 @@
                 <a href="{{AppSubUrl}}/explore/organizations" class="circular ui primary basic button">{{.page_recommend_org_more}} <i class="arrow circle right icon"></i></a>
             </div>
             <div class="sixteen wide tablet twelve wide computer column">
-                <div class="ui stackable three column grid homeorg-list" id="recommendorg">
+                <div class="ui three column grid homeorg-list" id="recommendorg">
                     
                 </div>
             </div>
@@ -78,7 +78,7 @@
             <h2>{{.page_dev_env}}</h2>
             <p><span class="ui text grey">{{.page_dev_env_desc}}</p>
         </div>
-        <div class="ui four stackable cards">
+        <div class="ui four doubling cards">
             <div class="card">
                 <div class="image">
                     <img src="/img/i-pic-01.svg">
@@ -158,4 +158,4 @@
 <script src="/home/home.js?v={{MD5 AppVer}}" type="text/javascript"></script>
 
 
-{{template "base/footer" .}}
+{{template "base/footer" .}}