Changes for page Collaborate on reproducible science, anywhere

Last modified by hbpadmin on 2022/12/30 11:01

From 45.1 to 44.1 From 47.1 to 46.1

From version 46.1

edited by superadmin
on 2021/03/02 17:48

Change comment: Install extension [eu.hbp.wiki:xwiki-skin-collaboratory/0.24.7]

To version 45.1

edited by hbpadmin
on 2020/07/23 20:05

Change comment: Rollback to version xar:eu.hbp.wiki:xwiki-skin-collaboratory/0.20.5

Raw
Rendered

Summary

Page properties (3 modified, 0 added, 0 removed)
Objects (1 modified, 0 added, 0 removed)
- XWiki.StyleSheetExtension[0]

Details

Page properties

Author

@@ -1,1 +1,1 @@
--XWiki.superadmin
++XWiki.hbpadmin

Default language

...	...	@@ -1,1 +1,0 @@
1		-en

Content

@@ -8,7 +8,7 @@
        <div class="container">
          <div class="row">
            <div class="col-md-7 col-md-push-5">
--            <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/WebHome/wiki_home_graphic.svg" />
++            <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/wiki_home_graphic.svg" />
            </div>
            <div class="col-md-5 col-md-pull-7 hero-text">
              <h3>Collaborate.<br/>Create reproducible science.<br/>Discover EBRAINS services at work.<br/>From anywhere.</h3>
@@ -18,19 +18,15 @@
        </div>
        <div class="container-fluid search__row">
           <div class="container">
--           <div class="col-sm-12 col-md-6 col-md-offset-3">
--             <form role="search" action="/bin/view/Main/Search" method="GET">
--               <div class="input-group">
--                 <input type="search" name="text" class="form-control input-lg" title="Search word in all wiki pages" placeholder="Search word in all wiki pages">
--                 <span class="input-group-btn">
--                   <button type="submit" class="btn btn-primary input-lg">
--                     <span class="fa fa-search"></span>
--                     <span class="sr-only">Search</span>
--                   </button>
--                 </span>
--               </div>
--             </form>
--           </div>
++            <div class="col-md-6 col-md-offset-3">
++              <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET">
++                <div>
++                  <input type="text" class="form-control" name="text" placeholder="Search word in all wiki pages">
++                  <i class="glyphicon glyphicon-search"></i>
++                </div>
++                <button class="btn clb-btn-default" type="submit">Search</button>
++              </form>
++            </div>
           </div>
        </div>
  {{/html}}

XWiki.StyleSheetExtension[0]

Code

@@ -1,3 +1,9 @@
++/*
++.teasing .collaborate {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/collaborate.jpg');}
++.teasing .reproductible {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/reproducible.jpg');}
++.teasing .science {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/science.jpg');}
++.teasing .anywhere {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/anywhere.jpg');}
++*/
  #mainContentArea{
      padding:0;
      padding-top:1.25rem
@@ -18,11 +18,194 @@
    padding-left:0;
    padding-right:0;
    min-height:300px;
--  .search__row input[type="search"] {
--    font-size: 16px;
--    height: 54px;
++/*
++  p.alert-info{
++      padding:2rem
    }
++  .teasing{
++      margin-bottom:50px
++  }
++  .teasing .card{
++      text-align:center;
++      position:relative;
++      height:100%;
++      background-size:cover;
++      background-repeat:no-repeat;
++      background-position:50% 50%;
++      padding-bottom:20px;
++      margin-bottom:20px
++  }
++  .teasing .card::before{
++      position:absolute;
++      top:0;
++      right:0;
++      bottom:0;
++      left:0;
++      display:block;
++      background-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 85%);
++      content:''
++  }
++  .teasing .card-header{
++      position:relative;
++      height:150px
++  }
++  .teasing .coming-soon{
++      position:absolute;
++      z-index:10;
++      left:0;
++      right:0;
++      padding:.5rem;
++      border-radius:.25rem;
++      font-weight:700;
++      top:50%
++  }
++  .teasing .coming-soon span{
++      font-size:1.25rem;
++      line-height:2;
++      padding:.5rem;
++      border-radius:.25rem;
++      font-weight:700;
++      margin-top:-17px;
++      background:rgba(255,255,255,.8);
++  }
++  .teasing .card-content {
++      position:relative;
++      overflow:hidden;
++      margin-top:0;
++      padding-top:0;
++      padding-bottom:0;
++      padding-left:.5rem;
++      padding-right:.5rem;
++      color: @color-white;
++      font-size:1rem;
++      .card-title {
++        color:@color-white;
++      }
++  }
++  .teasing .card-title{
++      margin-top:1.5rem;
++      margin-right:0;
++      margin-bottom:1rem;
++      margin-left:0;
++      font-weight:700
++  }
++  .clb-actions {
++      background-color:#f0f3f1;
++      padding-top:5rem;
++      padding-left:0;
++      padding-right:0;
++      padding-bottom:0
++  }
++  .clb-actions .clb-box{
++      margin-bottom:5rem;
++      font-size:1.125rem;
++      display: block
++  }
++  .clb-actions>.row{
++      margin-left:0;
++      margin-right:0
++  }
++  .clb-actions .clb-box:hover{
++      text-decoration:none
++  }
++  .clb-content>.row{
++      margin-bottom:5rem
++  }
++*/
++  .clb-search-bar{
++      display:flex;
++      align-items:stretch;
++      position:relative
++  }
++  .clb-search-bar>div{
++      flex:1;
++      margin:2px 10px 2px 0
++  }
++  .clb-search-bar input[type=text]{
++      width:100%;
++      padding:1.5rem;
++      padding-left:2.5rem;
++      border-radius: @border-radius-default;
++      background-color: @color-white;
++      box-shadow:none
++  }
++  .clb-search-bar input[type=text]:focus{
++      border-color: @color-brand-primary;
++      background-color:@color-white;
++      box-shadow:none
++  }
++  .clb-search-bar i{
++      position:absolute;
++      margin-top:-.5rem;
++      color: @color-gray-200;
++      top:50%;
++      left:1em
++  }
++  .clb-search-bar input[type=text]:focus~i{
++      color: @color-brand-primary;
++  }
++  /*
++  @media screen and (min-width:992px){
++      .teasing .row{
++          display:flex
++      }
++      .teasing .row>[class*=col-]{
++          display:flex;
++          flex-direction:column
++      }
++      .clb-actions{
++          padding-bottom:5rem
++      }
++      .clb-actions .clb-box{
++          margin-bottom:0
++      }
++      .clb-actions .container,
++      .clb-actions .container>.row{
++          display:flex
++      }
++      .clb-actions .clb-box-container,
++      .clb-actions .clb-box-container a,
++      .clb-actions .container>.row>[class*=col-]>.row{
++          height:100%;
++          display:block
++      }
++  }
++  */
  }
++
++.clb-box{
++    background-color:#fff;
++    box-shadow:0 1px 2px 0 rgba(0,0,0,.1);
++    padding:2rem;
++    padding-bottom:5rem;
++    color: @color-brand-primary;
++    display:block
++    .clb-box-title {
++      color:#45b07c;
++      font-weight:600;
++      margin-bottom:5rem;
++    }
++}
++
++.clb-btn-default,button {
++    background-image:none;
++    box-shadow:none;
++    border:0;
++    border-radius: @border-radius-default;
++    padding-top:.5rem;
++    padding-bottom:.5rem;
++    padding-left:1rem;
++    padding-right:1rem;
++    background-color:@color-brand-primary;
++    color: @color-white;
++    &:hover {
++      background-color: darken(@color-brand-primary, 10%);
++    }
++   &:active {
++      background-color: darken(@color-brand-primary, 15%);
++    }
++}
++
  #xwikicontent .get-started__row__title {
    margin: 1rem 0;
    font-weight: 400;
@@ -116,3 +116,44 @@
    border-top: 1px solid #ccc;
    /*border-bottom: 1px solid #ccc;*/
  }
++
++.tags__title, .tags__text {
++  text-align: center;
++}
++
++.tags__title--collaborate,
++.tags__title--science,
++.tags__title--reproducible,
++.tags__title--anywhere {
++  padding-top: 4rem;
++  position: relative;
++}
++
++.tags__title--collaborate::before,
++.tags__title--science::before,
++.tags__title--reproducible::before,
++.tags__title--anywhere::before {
++  position: absolute;
++  width: 50px;
++  height: 50px;
++  background-repeat: none;
++  top: 0;
++  margin-left: 50%;
++  left: -25px;
++  content: " ";
++  display: table;
++}
++
++.tags__title--collaborate::before {
++  background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Collaborate.svg");
++}
++.tags__title--science::before {
++  background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Science.svg");
++}
++.tags__title--reproducible::before {
++  background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Reproducible.svg");
++}
++.tags__title--anywhere::before {
++  background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Anywhere.svg");
++}
++