Project

General

Profile

« Previous | Next » 

Revision 60892

Added by Argiro Kokogiannaki about 3 years ago

[Connect | Trunk]

- Update affiliations layout
- Use customization class to create the css
- Create preview/ demo component
- Clean up piwik helper file
- updates on customization css

View differences:

demo.component.html
1 
<customization *ngIf="layout" [properties]="properties"
2 
               [layout]="layout" ></customization>
1 3 
<div class="">
2 4 
   <div
3 
    class="uk-padding  uk-text-center generalSearchForm uk-width-1-1 uk-height-small midBackground uk-flex uk-flex-center uk-flex-middle">
4 
    <div class="uk-margin-large-top uk-margin-large-bottom uk-padding">
5 
      <div>
6 
        <input class="uk-input uk-input-small uk-width-medium uk-margin-small-bottom" placeholder="Search... ">
7 
        <button class="uk-button uk-margin-small-left">Button</button>
8 
      </div>
9 
      <div>
10 
        <a class="portal-link">Link</a>
11 
      </div>
5 
    class="uk-padding    generalSearchForm   midBackground  ">
6 
     <div class="uk-container uk-container-large">
7 
       <div class="uk-margin-large-top">
8 
         <h1   class="title uk-margin-remove">
9 
           Lorem ipsum dolor sit amet
10 
         </h1>
11 
         <div class="subtitle uk-margin-remove">
12 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit
13 
         </div>
14 
       </div>
15 
     </div>
16 
    <div
17 
      class="  uk-flex uk-flex-center uk-flex-middle">
18 
      <form class="uk-margin-large uk-margin-large-top ">
19 
        <input class="uk-input uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium  uk-margin-small-bottom" placeholder="Search... ">
20 
        <button class="uk-button uk-margin-small-left uktext-bold">Search</button>
21 
        <div class="uk-text-right uk-margin-small-top"><a class="portal-link">Advanced search</a></div>
22 
      </form>
12 23 
    </div>
13 24 
  </div>
14 25 
</div>
26 
<!--Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.-->
15 27 
<div class="uk-container uk-container-large uk-margin-top">
16 28 
  <my-tabs  class="uk-padding">
17 29 
    <my-tab
18 30 
      [tabTitle]="'Summary'" [tabId]="'summary'" class="uk-active">
19 
       <div class="uk-padding-small uk-text-center  uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle">
20 
         Summary tab
21 
       </div>
31 
       <div class="uk-padding  uk-width-1-1">
32 
         <div class="uk-margin-bottom">
33 
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
34 
         </div>
35 
         <div class="uk-margin-small-bottom">
36 
           <span class="uk-margin-right "><span class="lowOpacityColor uk-text-muted">Created: </span> 01-Jan-2020
37 
           </span>
38 
           <span><span class="uk-display-inline-block "><span class="lowOpacityColor uk-text-muted">Members: </span>
39 
             1024 </span></span>
40 
         </div>
41 
         <div class="uk-margin-small-bottom">
42 
           <span class="uk-margin-right "><span class="lowOpacityColor uk-text-muted">Projects: </span> <a
43 
             class="portal-link">567
44 
           </a>
45 
           </span>
46 
           <span><span class="uk-display-inline-block "><span class="lowOpacityColor uk-text-muted">Content providers:
47 
           </span>
48 
             <a class="portal-link">123</a></span></span>
49 
         </div>
50 
         <hr>
51 
         <div>
52 
           <div class="tab-header"> <span class=""> Recent publications </span></div>
53 
           <div class="uk-text-right "><a class=" uk-button uk-button-text"   > View all  </a></div>
54 
           <result-preview [properties]="properties" [result]="result"></result-preview>
55 
         </div>
56 
         </div>
22 57 
    </my-tab>
23 58 

  		




  24
  59
  
    
    <my-tab   customClass="portalTab"


  		




  ......




  28
  63
  
    
      </div>


  		




  29
  64
  
    
    </my-tab>


  		




  30
  65
  
    
  </my-tabs>


  		




  
  66
  
    
  <div>


  		




  
  67
  
    
    <result-landing [resultFromInput]="true" [resultLandingInfo]="resultLanding"></result-landing>


  		




  
  68
  
    

  		




  
  69
  
    
  </div>


  		




  31
  70
  
    
  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>


  		




  32
  71
  
    

  		




  33
  72
  
    
  <div class="uk-padding-small uk-text-center communityPanelBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle"  >


  		




  ......




  35
  74
  
    
      <h1 >Heading</h1>


  		




  36
  75
  
    
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>


  		




  37
  76
  
    
      <a class="">Link</a>


  		




  38
  
  
    
   <button class="uk-button">Button</button>


  		




  
  77
  
    
      <br>


  		




  
  78
  
    
      <button class="uk-button">Button</button>


  		




  39
  79
  
    
    </div>


  		




  40
  80
  
    
  </div>


  		




  41
  81
  
    

  		












Also available in:  Unified diff