Changes for page Collaborate on reproducible science, anywhere
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. bougault1 +XWiki.asantars - Content
-
... ... @@ -18,21 +18,31 @@ 18 18 </div> 19 19 <div class="container-fluid search__row"> 20 20 <div class="container"> 21 - <div class="col-sm-12 col-md-6 col-md-offset-3"> 22 - <form role="search" action="/bin/view/Main/Search" method="GET"> 23 - <div class="input-group"> 24 - <input type="search" name="text" class="form-control input-lg" title="Search word in all wiki pages" placeholder="Search word in all wiki pages"> 25 - <span class="input-group-btn"> 26 - <button type="submit" class="btn btn-primary input-lg"> 27 - <span class="fa fa-search"></span> 28 - <span class="sr-only">Search</span> 29 - </button> 30 - </span> 31 - </div> 32 - </form> 33 - </div> 21 + <div class="col-md-6 col-md-offset-3"> 22 + <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET"> 23 + <div> 24 + <input type="text" class="form-control" name="text" placeholder="Search in the collaboratory"> 25 + <i class="glyphicon glyphicon-search"></i> 26 + </div> 27 + <button class="btn clb-btn-default" type="submit">Search</button> 28 + </form> 29 + </div> 34 34 </div> 35 35 </div> 32 + <!--div class="container highlighted"> 33 + <h4 class="highlighted__title">Highlighted collabs</h4> 34 + <div class="row highlighted_row"> 35 + <div class="col-sm-6 col-md-6 col-md-push-3"> 36 + <div class="thumbnail"> 37 + <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/wiki_home_graphic.svg" /> 38 + <div class="caption"> 39 + <h3><a href="/bin/view/Collabs/the-collaboratory/" class="stretched-link">The Collaboratory</a></h3> 40 + <p>The EBRAINS Collaboratory opens a portal onto the full gamut of EBRAINS services, providing you with examples of how to access services and resources, and a means of applying this quickly with little effort to you research. </p> 41 + </div> 42 + </div> 43 + </div> 44 + </div> 45 + </div --> 36 36 {{/html}} 37 37 38 38 (% class="container highlighted"%)((( ... ... @@ -40,26 +40,23 @@ 40 40 (% class="highlighted__title" %) 41 41 ==== Highlighted collabs ==== 42 42 {{html clean="false"}} 43 -<div class="container centered"> 44 -<a href="/bin/view/Collabs/the-collaboratory/Highlights" class="highlighted_view_all">View all</a> 45 -</div> 53 +<a href="" class="highlighted_view_all">View all</a> 46 46 {{/html}} 47 47 (% class="row highlighted_row" %) 48 48 ((( 49 49 50 -{{HighlightedCollabs featured="true" slider="true" /}}58 +{{HighlightedCollabs featured="true" slider="true"}} 51 51 52 52 ))) 53 53 ))) 54 54 55 -(% class="container" %) 56 -((( 57 -(% class="row explore-all" %) 58 -((( 59 - (% class="col-md-12" %) 60 -((( 61 -Explore all the [[Collabs]] 62 -))) 63 -))) 64 -))) 63 +{{html clean="false"}} 64 + <div class="container"> 65 + <div class="row explore-all"> 66 + <div class="col-md-12"> 67 + Explore all the <a href="/bin/view/Collabs">Collabs</a> 68 + </div> 69 + </div> 70 + </div> 71 +{{/html}} 65 65
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,3 +1,9 @@ 1 +/* 2 +.teasing .collaborate {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/collaborate.jpg');} 3 +.teasing .reproductible {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/reproducible.jpg');} 4 +.teasing .science {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/science.jpg');} 5 +.teasing .anywhere {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/anywhere.jpg');} 6 +*/ 1 1 #mainContentArea{ 2 2 padding:0; 3 3 padding-top:1.25rem ... ... @@ -18,9 +18,159 @@ 18 18 padding-left:0; 19 19 padding-right:0; 20 20 min-height:300px; 21 - .search__row input[type="search"] { 22 - font-size: 16px; 27 +/* 28 + p.alert-info{ 29 + padding:2rem 23 23 } 31 + .teasing{ 32 + margin-bottom:50px 33 + } 34 + .teasing .card{ 35 + text-align:center; 36 + position:relative; 37 + height:100%; 38 + background-size:cover; 39 + background-repeat:no-repeat; 40 + background-position:50% 50%; 41 + padding-bottom:20px; 42 + margin-bottom:20px 43 + } 44 + .teasing .card::before{ 45 + position:absolute; 46 + top:0; 47 + right:0; 48 + bottom:0; 49 + left:0; 50 + display:block; 51 + background-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 85%); 52 + content:'' 53 + } 54 + .teasing .card-header{ 55 + position:relative; 56 + height:150px 57 + } 58 + .teasing .coming-soon{ 59 + position:absolute; 60 + z-index:10; 61 + left:0; 62 + right:0; 63 + padding:.5rem; 64 + border-radius:.25rem; 65 + font-weight:700; 66 + top:50% 67 + } 68 + .teasing .coming-soon span{ 69 + font-size:1.25rem; 70 + line-height:2; 71 + padding:.5rem; 72 + border-radius:.25rem; 73 + font-weight:700; 74 + margin-top:-17px; 75 + background:rgba(255,255,255,.8); 76 + } 77 + .teasing .card-content { 78 + position:relative; 79 + overflow:hidden; 80 + margin-top:0; 81 + padding-top:0; 82 + padding-bottom:0; 83 + padding-left:.5rem; 84 + padding-right:.5rem; 85 + color: @color-white; 86 + font-size:1rem; 87 + .card-title { 88 + color:@color-white; 89 + } 90 + } 91 + .teasing .card-title{ 92 + margin-top:1.5rem; 93 + margin-right:0; 94 + margin-bottom:1rem; 95 + margin-left:0; 96 + font-weight:700 97 + } 98 + .clb-actions { 99 + background-color:#f0f3f1; 100 + padding-top:5rem; 101 + padding-left:0; 102 + padding-right:0; 103 + padding-bottom:0 104 + } 105 + .clb-actions .clb-box{ 106 + margin-bottom:5rem; 107 + font-size:1.125rem; 108 + display: block 109 + } 110 + .clb-actions>.row{ 111 + margin-left:0; 112 + margin-right:0 113 + } 114 + .clb-actions .clb-box:hover{ 115 + text-decoration:none 116 + } 117 + .clb-content>.row{ 118 + margin-bottom:5rem 119 + } 120 +*/ 121 + .clb-search-bar{ 122 + display:flex; 123 + align-items:stretch; 124 + position:relative 125 + } 126 + .clb-search-bar>div{ 127 + flex:1; 128 + margin:2px 10px 2px 0 129 + } 130 + .clb-search-bar input[type=text]{ 131 + width:100%; 132 + padding:1.5rem; 133 + padding-left:2.5rem; 134 + border-radius: @border-radius-default; 135 + background-color: @color-white; 136 + box-shadow:none 137 + } 138 + .clb-search-bar input[type=text]:focus{ 139 + border-color: @color-brand-primary; 140 + background-color:@color-white; 141 + box-shadow:none 142 + } 143 + .clb-search-bar i{ 144 + position:absolute; 145 + margin-top:-.5rem; 146 + color: @color-gray-200; 147 + top:50%; 148 + left:1em 149 + } 150 + .clb-search-bar input[type=text]:focus~i{ 151 + color: @color-brand-primary; 152 + } 153 + /* 154 + @media screen and (min-width:992px){ 155 + .teasing .row{ 156 + display:flex 157 + } 158 + .teasing .row>[class*=col-]{ 159 + display:flex; 160 + flex-direction:column 161 + } 162 + .clb-actions{ 163 + padding-bottom:5rem 164 + } 165 + .clb-actions .clb-box{ 166 + margin-bottom:0 167 + } 168 + .clb-actions .container, 169 + .clb-actions .container>.row{ 170 + display:flex 171 + } 172 + .clb-actions .clb-box-container, 173 + .clb-actions .clb-box-container a, 174 + .clb-actions .container>.row>[class*=col-]>.row{ 175 + height:100%; 176 + display:block 177 + } 178 + } 179 + */ 24 24 } 25 25 26 26 .clb-box{ ... ... @@ -77,8 +77,12 @@ 77 77 .get-started__title, .highlighted__title{ 78 78 text-align: center; 79 79 color: #aaa; 80 - padding:2rem 0 0.5rem 0; 236 + /*padding: 10rem 0;*/ 237 + padding:5rem 0; 81 81 font-size: 2rem; 239 + /*border-top: 1px solid #ccc;*/ 240 + /*margin-top: 10rem;*/ 241 + /*margin-top: 5rem;*/ 82 82 } 83 83 .get-started__row { 84 84 margin-top: 3rem; ... ... @@ -92,7 +92,6 @@ 92 92 93 93 .explore-all{ 94 94 padding-top: 5rem; 95 - padding-bottom: 5rem; 96 96 } 97 97 98 98 @media screen and (min-width: 992px) {