Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited
Created October 27, 2022 19:50
Embed
What would you like to do?
Materialize - Google Drive Embed
<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>
$(document).ready(function(){
$('.tabs').tabs();
});
<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>
.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;}}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment