Difference between revisions of "Team:Potsdam/ContentPageTemplateMaterialTest"

Line 23: Line 23:
 
     $('.scrollspy').scrollSpy();
 
     $('.scrollspy').scrollSpy();
 
   });
 
   });
 +
 +
  $(document).ready(function(){
 +
    $('ul.tabs').tabs();
 +
  });
 +
     
 
        
 
        
 
   // Initialize collapse button
 
   // Initialize collapse button
Line 214: Line 219:
 
<br/>
 
<br/>
 
<br/>
 
<br/>
−
   <ul id="slide-out" class="side-nav">
+
 
−
       <li><a href="#!">First Sidebar Link</a></li>
+
   <div class="row">
−
      <li><a href="#!">Second Sidebar Link</a></li>
+
    <div class="col s12">
−
      <li class="no-padding">
+
       <ul class="tabs">
−
         <ul class="collapsible collapsible-accordion">
+
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
−
          <li>
+
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
−
            <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
+
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
−
            <div class="collapsible-body">
+
         <li class="tab col s3"><a href="#test4">Test 4</a></li>
−
              <ul>
+
      </ul>
−
                <li><a href="#!">First</a></li>
+
    </div>
−
                <li><a href="#!">Second</a></li>
+
    <div id="test1" class="col s12">Test 1</div>
−
                <li><a href="#!">Third</a></li>
+
    <div id="test2" class="col s12">Test 2</div>
−
                <li><a href="#!">Fourth</a></li>
+
    <div id="test3" class="col s12">Test 3</div>
−
               </ul>
+
    <div id="test4" class="col s12">Test 4</div>
 +
  </div>
 +
 
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
  <a class="waves-effect waves-light btn-large" href="#">Wave</a>
 +
 
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 
 +
 
 +
      <div class="row">
 +
        <div class="col s12 m6">
 +
          <div class="card blue-grey darken-1">
 +
            <div class="card-content white-text">
 +
              <span class="card-title">Card Title</span>
 +
              <p>I am a very simple card. I am good at containing small bits of information.
 +
               I am convenient because I require little markup to use effectively.</p>
 
             </div>
 
             </div>
−
           </li>
+
            <div class="card-action">
−
         </ul>
+
              <a href="#">This is a link</a>
−
       </li>
+
              <a href="#">This is a link</a>
−
    </ul>
+
            </div>
−
    <ul class="right hide-on-med-and-down">
+
           </div>
−
      <li><a href="#!">First Sidebar Link</a></li>
+
         </div>
−
       <li><a href="#!">Second Sidebar Link</a></li>
+
       </div>
−
       <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
+
           
−
       <ul id='dropdown1' class='dropdown-content'>
+
<br/><br/>
−
        <li><a href="#!">First</a></li>
+
<br/>
−
         <li><a href="#!">Second</a></li>
+
<br/>
−
         <li><a href="#!">Third</a></li>
+
<br/>
−
         <li><a href="#!">Fourth</a></li>
+
      <div class="row">
 +
        <div class="col s12 m7">
 +
          <div class="card">
 +
            <div class="card-image">
 +
              <img src="images/sample-1.jpg">
 +
              <span class="card-title">Card Title</span>
 +
            </div>
 +
            <div class="card-content">
 +
              <p>I am a very simple card. I am good at containing small bits of information.
 +
              I am convenient because I require little markup to use effectively.</p>
 +
            </div>
 +
            <div class="card-action">
 +
              <a href="#">This is a link</a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
       </div>
 +
                       
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
  <div class="col s12 m7">
 +
    <h2 class="header">Horizontal Card</h2>
 +
    <div class="card horizontal">
 +
      <div class="card-image">
 +
        <img src="http://lorempixel.com/100/190/nature/6">
 +
      </div>
 +
      <div class="card-stacked">
 +
        <div class="card-content">
 +
          <p>I am a very simple card. I am good at containing small bits of information.</p>
 +
        </div>
 +
        <div class="card-action">
 +
          <a href="#">This is a link</a>
 +
        </div>
 +
       </div>
 +
    </div>
 +
  </div>
 +
 
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 
 +
 
 +
  <div class="card">
 +
    <div class="card-image waves-effect waves-block waves-light">
 +
      <img class="activator" src="images/office.jpg">
 +
    </div>
 +
    <div class="card-content">
 +
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
 +
      <p><a href="#">This is a link</a></p>
 +
    </div>
 +
    <div class="card-reveal">
 +
       <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
 +
      <p>Here is some more information about this product that is only revealed once clicked on.</p>
 +
    </div>
 +
  </div>
 +
         
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 
 +
  <div class="card">
 +
    <div class="card-content">
 +
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
 +
    </div>
 +
    <div class="card-tabs">
 +
      <ul class="tabs tabs-fixed-width">
 +
         <li class="tab"><a href="#test4">Test 1</a></li>
 +
         <li class="tab"><a class="active" href="#test5">Test 2</a></li>
 +
         <li class="tab"><a href="#test6">Test 3</a></li>
 
       </ul>
 
       </ul>
−
     </ul>
+
     </div>
−
<a href="#" data-activates="slide-out" class="btn button-collapse" onclick="$('.button-collapse').sideNav('show');">Side nav demo</a>
+
    <div class="card-content grey lighten-4">
 +
      <div id="test4">Test 1</div>
 +
      <div id="test5">Test 2</div>
 +
      <div id="test6">Test 3</div>
 +
    </div>
 +
  </div>
 +
 
 
<br/><br/>
 
<br/><br/>
 
<br/>
 
<br/>
 
<br/>
 
<br/>
 
<br/>
 
<br/>
 +
 +
  <div class="chip">
 +
    <img src="images/yuna.jpg" alt="Contact Person">
 +
    Jane Doe
 +
  </div>
 +
<div class="chip">
 +
    Tag
 +
    <i class="close material-icons">close</i>
 +
  </div>
 +
       
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 +
 +
  <ul class="collection">
 +
    <li class="collection-item avatar">
 +
      <img src="images/yuna.jpg" alt="" class="circle">
 +
      <span class="title">Title</span>
 +
      <p>First Line <br>
 +
        Second Line
 +
      </p>
 +
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
 +
    </li>
 +
    <li class="collection-item avatar">
 +
      <i class="material-icons circle">folder</i>
 +
      <span class="title">Title</span>
 +
      <p>First Line <br>
 +
        Second Line
 +
      </p>
 +
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
 +
    </li>
 +
    <li class="collection-item avatar">
 +
      <i class="material-icons circle green">insert_chart</i>
 +
      <span class="title">Title</span>
 +
      <p>First Line <br>
 +
        Second Line
 +
      </p>
 +
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
 +
    </li>
 +
    <li class="collection-item avatar">
 +
      <i class="material-icons circle red">play_arrow</i>
 +
      <span class="title">Title</span>
 +
      <p>First Line <br>
 +
        Second Line
 +
      </p>
 +
      <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
 +
    </li>
 +
  </ul>
 +
       
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 +
  <div class="row">
 +
    <form class="col s12">
 +
      <div class="row">
 +
        <div class="input-field col s6">
 +
          <input placeholder="Placeholder" id="first_name" type="text" class="validate">
 +
          <label for="first_name">First Name</label>
 +
        </div>
 +
        <div class="input-field col s6">
 +
          <input id="last_name" type="text" class="validate">
 +
          <label for="last_name">Last Name</label>
 +
        </div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="input-field col s12">
 +
          <input disabled value="I am not editable" id="disabled" type="text" class="validate">
 +
          <label for="disabled">Disabled</label>
 +
        </div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="input-field col s12">
 +
          <input id="password" type="password" class="validate">
 +
          <label for="password">Password</label>
 +
        </div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="input-field col s12">
 +
          <input id="email" type="email" class="validate">
 +
          <label for="email">Email</label>
 +
        </div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="col s12">
 +
          This is an inline input field:
 +
          <div class="input-field inline">
 +
            <input id="email" type="email" class="validate">
 +
            <label for="email" data-error="wrong" data-success="right">Email</label>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </form>
 +
  </div>
 +
       
 +
       
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 +
  <ul class="pagination">
 +
    <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
 +
    <li class="active"><a href="#!">1</a></li>
 +
    <li class="waves-effect"><a href="#!">2</a></li>
 +
    <li class="waves-effect"><a href="#!">3</a></li>
 +
    <li class="waves-effect"><a href="#!">4</a></li>
 +
    <li class="waves-effect"><a href="#!">5</a></li>
 +
    <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
 +
  </ul>
 +
           
 +
       
 +
       
 +
<br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
 +
<div class="progress">
 +
      <div class="indeterminate"></div>
 +
  </div>
 +
    <br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>   
 +
 +
  <div class="preloader-wrapper big active">
 +
    <div class="spinner-layer spinner-blue-only">
 +
      <div class="circle-clipper left">
 +
        <div class="circle"></div>
 +
      </div><div class="gap-patch">
 +
        <div class="circle"></div>
 +
      </div><div class="circle-clipper right">
 +
        <div class="circle"></div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 +
  <div class="preloader-wrapper active">
 +
    <div class="spinner-layer spinner-red-only">
 +
      <div class="circle-clipper left">
 +
        <div class="circle"></div>
 +
      </div><div class="gap-patch">
 +
        <div class="circle"></div>
 +
      </div><div class="circle-clipper right">
 +
        <div class="circle"></div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 +
  <div class="preloader-wrapper small active">
 +
    <div class="spinner-layer spinner-green-only">
 +
      <div class="circle-clipper left">
 +
        <div class="circle"></div>
 +
      </div><div class="gap-patch">
 +
        <div class="circle"></div>
 +
      </div><div class="circle-clipper right">
 +
        <div class="circle"></div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
          <div class="preloader-wrapper big active">
 +
      <div class="spinner-layer spinner-blue">
 +
        <div class="circle-clipper left">
 +
          <div class="circle"></div>
 +
        </div><div class="gap-patch">
 +
          <div class="circle"></div>
 +
        </div><div class="circle-clipper right">
 +
          <div class="circle"></div>
 +
        </div>
 +
      </div>
 +
 +
      <div class="spinner-layer spinner-red">
 +
        <div class="circle-clipper left">
 +
          <div class="circle"></div>
 +
        </div><div class="gap-patch">
 +
          <div class="circle"></div>
 +
        </div><div class="circle-clipper right">
 +
          <div class="circle"></div>
 +
        </div>
 +
      </div>
 +
 +
      <div class="spinner-layer spinner-yellow">
 +
        <div class="circle-clipper left">
 +
          <div class="circle"></div>
 +
        </div><div class="gap-patch">
 +
          <div class="circle"></div>
 +
        </div><div class="circle-clipper right">
 +
          <div class="circle"></div>
 +
        </div>
 +
      </div>
 +
 +
      <div class="spinner-layer spinner-green">
 +
        <div class="circle-clipper left">
 +
          <div class="circle"></div>
 +
        </div><div class="gap-patch">
 +
          <div class="circle"></div>
 +
        </div><div class="circle-clipper right">
 +
          <div class="circle"></div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <br/><br/>
 +
<br/>
 +
<br/>
 +
<br/>   
 +
 +
 +
 +
 +
 +
 +
  
 
       </div>
 
       </div>

Revision as of 14:01, 19 May 2017

menu cloud edit









  • filter_dramaFirst
    Lorem ipsum dolor sit amet.
  • placeSecond
    Lorem ipsum dolor sit amet.
  • whatshotThird
    Lorem ipsum dolor sit amet.





Toast!




Drop Me!




Open tap targen Close tap target
menu
I am here

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

menu





  • This is our big Tagline!

    Here's our small slogan.

  • Left Aligned Caption

    Here's our small slogan.

  • Right Aligned Caption

    Here's our small slogan.

  • This is our big Tagline!

    Here's our small slogan.















Test 1
Test 2
Test 3
Test 4





Wave




Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link This is a link





Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link





Horizontal Card

I am a very simple card. I am good at containing small bits of information.

This is a link





Card Titlemore_vert

This is a link

Card Titleclose

Here is some more information about this product that is only revealed once clicked on.






I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

Test 1
Test 2
Test 3





Contact Person Jane Doe
Tag close





  • Title

    First Line
    Second Line

    grade
  • folder Title

    First Line
    Second Line

    grade
  • insert_chart Title

    First Line
    Second Line

    grade
  • play_arrow Title

    First Line
    Second Line

    grade





This is an inline input field: