Materialize - Google Drive Embed

index.html

<nav>
  <div class="nav-wrapper">
    <div class="row">
      <div class="col s12">
				<a href="https://landsurveyorsunited.com/hubs/excel" target="_blank" class="brand-logo">Land Surveyor Spreadsheet Tools<span class="hide-on-small-only"> submitted by Land Surveyors United Members</span>
					<span class="hide-on-small-only" style="font-weight: 100; font-size: 0.4em; opacity:0.5;">
						v1.0.0
					</span>
				</a>
        <ul class="right">
          <li><a href="https://codepen.io/j_holtslander/debug/PXLQJG" target="_blank"><i class="material-icons">fullscreen</i></a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div class="row">
	<ul class="tabs">
		<li class="tab"><a href="#grid-view"><i class="material-icons">apps</i> Grid view</a></li>
		<li class="tab"><a href="#list-view"><i class="material-icons">list</i> List view</a></li>
	</ul>
</div>

<div id="grid-view" class="row">
	<div class="col s12">
		<h5><i class="material-icons">folder_open</i> Grid view</h5>
		<div class="card grey darken-4">
			<div class="card-content">
				<iframe class="lazyload grid" data-src="https://drive.google.com/embeddedfolderview?id=1SKGw9izs_pkupaGhl7-28wwcqmvEg65X#grid" style="width:100%; border:0;"></iframe>
			</div>
		</div>
	</div>
</div>

<div id="list-view" class="row">
	<div class="col s12">
		<h5><i class="material-icons">folder_open</i> List view</h5>
		<div class="card">
			<iframe class="lazyload list" data-src="https://drive.google.com/embeddedfolderview?id=1SKGw9izs_pkupaGhl7-28wwcqmvEg65X#list" style="width:100%; border:0;"></iframe>
		</div>
	</div>
</div>

<!-- Gitter Chat Link -->
<div class="fixed-action-btn"><a class="btn-floating btn-large red" href="https://landsurveyorsunited.com/forum/topics" target="_blank"><i class="large material-icons">chat</i></a></div>

materialize-google-drive-embed.markdown

Materialize - Google Drive Embed

Part of Jay's Materialize Collection at: https://codepen.io/collection/nbBqgY

A Pen by JFarrow on CodePen.

License.

script.js

$(document).ready(function(){
	$('.tabs').tabs();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="//codepen.io/j_holtslander/pen/pLNzQb.js"></script>
<script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>

style.scss

.grid {min-height:480px;}
.list {min-height:480px;padding-top: 16px;}
.card {overflow-x: hidden;}



































































.tab {.material-icons {position: relative;top: 6px;margin-right: 4px;}}
h5 {.material-icons {font-size: inherit;position: relative;top: 3px;}}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />