Skip to content

Instantly share code, notes, and snippets.

@esparkman

esparkman/application.html.erb

Created August 19, 2019 21:36
Show Gist options
  • Save esparkman/d199de70b6da349d096b65b5455b07cd to your computer and use it in GitHub Desktop.
Save esparkman/d199de70b6da349d096b65b5455b07cd to your computer and use it in GitHub Desktop.
Download ZIP
broken example
Raw
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Webbit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,500,600,700' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body class="bg-gray-200 relative h-screen overflow-x-hidden">
<% flash.each do |type, message| %>
<% if type == "alert" %>
<div class="bg-red-500">
<div class="container px-2 mx-auto py-4 text-white text-center font-medium font-sans"><%= message %></div>
</div>
<% end %>
<% if type == "notice" %>
<div class="bg-green-500">
<div class="container px-2 mx-auto py-4 text-white text-center font-medium font-sans"><%= message %></div>
</div>
<% end %>
<% end %>
<nav class="js-nav bg-white py-2 border-b border-gray-400" role="navigation" arial-label="main navigation">
<div class="flex flex-wrap items-center justify-center lg:justify-start lg:content-center px-4 lg:px-6">
<%= link_to root_path, class:"leading-normal no-underline text-gray-800 my-2 md:my-0" do %>
<h1 class="text-lg pr-2 font-bold">WEBBIT</h1>
<% end %>
<div class="flex flex-wrap justify-start w-full items-center lg:w-2/3">
<div class="w-full lg:w-1/4 px-0 md:px-2 mb-2 lg:mb-0">
<div class="dropdown rounded bg-white text-gray-700 ml-1 hover:bg-gray-200 z-50 relative">
<%= link_to "#", class: "dropdown-target border no-underline flex justify-between text-gray-700 items-center pt-2 pb-2 pl-3 pr-1 text-sm rounded", role: "button" do %>
<%= content_for?(:community_label) ? yield(:community_label) : "Select a community" %>
<%= render_svg 'icons/chevron-down' %>
<% end %>
<ul class="dropdown-menu hidden shadow-lg leading-normal list-none p-0 rounded-b border-t text-sm z-50">
<% @communities.each do |community| %>
<li>
<%= link_to community, class: "bg-white px-4 py-2 hover:bg-purple-500 hover:text-white no-underline flex items-center" do %>
<%= render_svg 'icons/conversation', styles:"avatar-sm mr-2 fill-current text-gray-500" %>
<span>w/</span> <%= community.name %>
<% end %>
</li>
<% end %>
</ul>
</div>
</div>
<div class="w-full lg:w-1/2 px-0 md:px-2">
<div class="relative">
<input class="input py-2 pl-10" id="search" type="text" placeholder="Search webbit">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-3 text-gray-700">
<svg class ="fill-current text-gray-500 h-4 w-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>search</title><path d="M22.414 19.586l-4.801-4.801A8.942 8.942 0 0 0 19 10a9 9 0 1 0-9 9 8.942 8.942 0 0 0 4.785-1.387l4.801 4.801c.39.391.902.586 1.414.586s1.024-.195 1.414-.586a2 2 0 0 0 0-2.828zM10 15c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z" /></svg>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-wrap flex-1 items-center justify-end pt-4 lg:pt-0">
<div class="mr-3">
<% if !user_signed_in? %>
<%= link_to "Login", new_user_session_path, class:"btn btn-outline btn-small mr-2" %>
<%= link_to "Sign up", new_user_registration_path, class: "btn btn-purple btn-small" %>
<% end %>
<% if user_signed_in? %>
<%= link_to new_submission_path do %>
<%= render_svg 'icons/create' %>
<% end %>
<% end %>
</div>
<% if user_signed_in? %>
<div class="dropdown rounded bg-white text-gray-700 ml-1 hover:bg-gray-200">
<%= link_to "#", class: "dropdown-target rounded border no-underline flex justify-between text-gray-700 uppercase tracking-wider text-xs font-semibold items-center pt-2 pb-2 pl-3 pr-1", role: "button" do %>
<%= current_user.username if current_user.username %>
<%= render_svg 'icons/chevron-down' %>
<% end %>
<ul class="dropdown-menu hidden shadow-lg leading-normal list-none p-0 rounded-b border-t">
<h5 class="mt-2 uppercase text-xs text-gray-500 font-normal py-2 pl-3 tracking-wider">My Stuff</h5>
<li>
<%= link_to profile_path(current_user), class: "hover:bg-purple-500 hover:text-white text-gray-700 no-underline block py-2 px-4 flex items-center text-sm" do %>
<%= render_svg 'icons/user', styles: "icon-md fill-current text-gray-600 mr-3" %> My Profile
<% end %>
</li>
<li>
<%= link_to edit_user_registration_path, class: "hover:bg-purple-500 hover:text-white text-gray-700 no-underline block py-2 px-4 flex items-center text-sm" do %>
<%= render_svg 'icons/settings', styles: "icon-md fill-current text-gray-600 mr-3" %> Account Settings
<% end %>
</li>
<li>
<%= link_to destroy_user_session_path, method: :delete, class: "hover:bg-purple-500 hover:text-white text-gray-700 no-underline block py-2 px-4 rounded-b flex items-center text-sm" do %>
<%= render_svg 'icons/signout', styles: "icon-md fill-current text-gray-600 mr-3" %> Sign out
<% end %>
</li>
</ul>
</div>
<% end %>
</div>
</div>
</nav>
<%= content_for?(:content) ? yield(:content) : yield %>
<div class="js-notice dynamic-notice fadeInUp animated"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment