mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
stream skeleton design
This commit is contained in:
drusepth
parent
cac99716d0
commit
553e2143d4
@ -1,4 +1,6 @@
|
||||
class StreamController < ApplicationController
|
||||
layout 'tailwind', only: [:index]
|
||||
|
||||
before_action :authenticate_user!
|
||||
before_action :set_stream_navbar_actions, only: [:index, :global]
|
||||
before_action :set_stream_navbar_color, only: [:index, :global]
|
||||
|
||||
@ -1,3 +1,303 @@
|
||||
<div class="min-h-screen bg-gray-100">
|
||||
<header class="bg-white shadow-sm lg:static lg:overflow-y-visible">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="relative flex justify-between xl:grid xl:grid-cols-12 lg:gap-8">
|
||||
<div class="flex md:absolute md:left-0 md:inset-y-0 lg:static xl:col-span-2">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
something lhs
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 md:px-8 lg:px-0 xl:col-span-6">
|
||||
<div class="flex items-center px-6 py-4 md:max-w-3xl md:mx-auto lg:max-w-none lg:mx-0 xl:px-0">
|
||||
<div class="w-full">
|
||||
<label for="search" class="sr-only">Share something...</label>
|
||||
<div class="relative">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
|
||||
<!-- Heroicon name: solid/search -->
|
||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<input id="search" name="search" class="block w-full bg-white border border-gray-300 rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Search shared posts..." type="search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex md:absolute md:left-0 md:inset-y-0 lg:static xl:col-span-2">
|
||||
<div class="flex-shrink-0 flex items-center">
|
||||
rhs
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="py-6">
|
||||
<div class="max-w-3xl mx-auto sm:px-6 lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<!--
|
||||
<div class="hidden lg:block lg:col-span-3 xl:col-span-2">
|
||||
<nav aria-label="Sidebar" class="divide-y divide-gray-300">
|
||||
filters / highlights (each page, documents, timelines)
|
||||
</nav>
|
||||
</div>
|
||||
-->
|
||||
<main class="lg:col-span-12 xl:col-span-8">
|
||||
<div class="bg-notebook-blue text-white my-8 p-2 rounded">
|
||||
share input form TODO
|
||||
</div>
|
||||
<h2 class="text-gray-400 font-bold text-sm my-4">Shares from people you follow</h2>
|
||||
<div class="flow-root">
|
||||
<ul role="list" class="-mb-8">
|
||||
<li>
|
||||
<div class="relative pb-8">
|
||||
<span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
|
||||
<div class="relative flex items-start space-x-3">
|
||||
<div class="relative">
|
||||
<img class="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white" src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
|
||||
|
||||
<span class="absolute -bottom-2 -right-1.5 bg-white rounded-tl px-0.5">
|
||||
<i class="material-icons <%= Creature.text_color %> text-base"><%= Creature.icon %></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div>
|
||||
<div class="text-sm text-gray-500">
|
||||
<a href="#" class="font-medium text-gray-900">Andrew Brown</a>
|
||||
<span class="mt-0.5">shared a <strong>Creature</strong></span>
|
||||
<span class="px-1">·</span>
|
||||
<span class="">6h ago</span>
|
||||
</div>
|
||||
<p>
|
||||
message with share
|
||||
</p>
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-700">
|
||||
<%= link_to '#', class: '' do %>
|
||||
<div class="grid grid-cols-3 bg-white rounded hover:shadow-lg">
|
||||
<div class="col-span-1">
|
||||
<%= image_tag Character.last.random_image_including_private, class: 'w-full h-full rounded-l' %>
|
||||
</div>
|
||||
<div class="col-span-2 pl-4 pt-4 border-l-4 border-brown-500">
|
||||
<h3 class="text-lg mb-4 font-bold">
|
||||
<i class="material-icons <%= Creature.text_color %> float-left mr-2"><%= Creature.icon %></i>
|
||||
Page name
|
||||
</h3>
|
||||
Details or description here
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="relative pb-8">
|
||||
<span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
|
||||
<div class="relative flex items-start space-x-3">
|
||||
<div>
|
||||
<div class="relative px-1">
|
||||
<div class="relative">
|
||||
<img class="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white" src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
|
||||
|
||||
<span class="absolute -bottom-2 -right-1.5 bg-white rounded-tl px-0.5">
|
||||
<i class="material-icons <%= User.text_color %> text-base"><%= User.icon %></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 py-1.5">
|
||||
<div class="text-sm text-gray-500">
|
||||
<a href="#" class="font-medium text-gray-900">Dr. Evil</a>
|
||||
followed
|
||||
<a href="#" class="font-medium text-gray-900">Bob "Bob" Bobson</a>
|
||||
<span class="px-1">·</span>
|
||||
<span class="text-sm text-gray-500">2d ago</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="relative pb-8">
|
||||
<span class="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
|
||||
<div class="relative flex items-start space-x-3">
|
||||
<div>
|
||||
<div class="relative px-1">
|
||||
<div class="relative">
|
||||
<img class="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white" src="https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
|
||||
|
||||
<span class="absolute -bottom-2 -right-1.5 bg-white rounded-tl px-0.5">
|
||||
<i class="material-icons text-blue-500 text-base">forum</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 py-0">
|
||||
<div class="text-sm leading-8 text-gray-500">
|
||||
<span class="mr-0.5">
|
||||
<a href="#" class="font-medium text-gray-900">Dr. Evil</a>
|
||||
started a forum discussion
|
||||
</span>
|
||||
<span class="px-1">·</span>
|
||||
<span class="text-sm text-gray-500">2d ago</span>
|
||||
<div class="ml-1">
|
||||
<a href="#" class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm bg-blue-500 hover:bg-blue-400 hover:shadow-lg">
|
||||
<i class="material-icons float-left text-white">forum</i>
|
||||
<span class="ml-3.5 font-medium text-white">What is the name of that guy who did the thing?</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="relative pb-8">
|
||||
<div class="relative flex items-start space-x-3">
|
||||
<div class="relative">
|
||||
<img class="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
|
||||
|
||||
<span class="absolute -bottom-2 -right-1.5 bg-white rounded-tl px-0.5">
|
||||
<i class="material-icons <%= Document.text_color %> text-base"><%= Document.icon %></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="text-sm">
|
||||
<a href="#" class="font-medium text-gray-900">Jason Meyers</a>
|
||||
<span class="text-gray-500">shared a <strong>Document</strong></span>
|
||||
<span class="px-1">·</span>
|
||||
<span class="text-sm text-gray-500">5d ago</span>
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-gray-700">
|
||||
<%= link_to '#', class: '' do %>
|
||||
<div class="grid grid-cols-3 bg-white rounded hover:shadow-lg">
|
||||
<div class="col-span-1">
|
||||
<%= image_tag Character.last.random_image_including_private, class: 'w-full h-full rounded-l' %>
|
||||
</div>
|
||||
<div class="col-span-2 pl-4 pt-4 border-l-4 border-teal-500">
|
||||
<h3 class="text-lg mb-4 font-bold">
|
||||
<i class="material-icons <%= Document.text_color %> float-left mr-2"><%= Document.icon %></i>
|
||||
Document name
|
||||
</h3>
|
||||
Details or description here
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<aside class="hidden xl:block xl:col-span-4">
|
||||
<h2 class="text-gray-400 font-bold text-sm my-4">Pages requesting feedback</h2>
|
||||
<div>
|
||||
<ul role="list" class="divide-y divide-gray-200">
|
||||
<li class="pt-0 pb-2">
|
||||
<div class="flex space-x-3">
|
||||
<img class="h-12 w-12 rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" alt="">
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium">
|
||||
<i class="material-icons <%= Character.text_color %> float-left text-sm mr-1"><%= Character.icon %></i>
|
||||
Lindsay Walton
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">1h</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500">for <strong>general feedback</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex space-x-3">
|
||||
<img class="h-12 w-12 rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" alt="">
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium">
|
||||
<i class="material-icons <%= Character.text_color %> float-left text-sm mr-1"><%= Character.icon %></i>
|
||||
Lindsay Walton
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">1h</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500">for <strong>believability</strong>, <strong>science check</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<div class="flex space-x-3">
|
||||
<img class="h-12 w-12 rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" alt="">
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium">
|
||||
<i class="material-icons <%= Character.text_color %> float-left text-sm mr-1"><%= Character.icon %></i>
|
||||
Lindsay Walton
|
||||
</h3>
|
||||
<p class="text-sm text-gray-500">2h</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500">for <strong>sensitivity</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- More items... -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="text-gray-400 font-bold text-sm mt-4 mb-2">Discussions happening now</h2>
|
||||
<div class="space-y-1">
|
||||
<div class="ml-1">
|
||||
<a href="#" class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm bg-blue-500 hover:bg-blue-400 hover:shadow-lg">
|
||||
<i class="material-icons float-left text-white">forum</i>
|
||||
<span class="ml-3.5 font-medium text-white">What is the name of that guy who did the thing?</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-1">
|
||||
<a href="#" class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm bg-blue-500 hover:bg-blue-400 hover:shadow-lg">
|
||||
<i class="material-icons float-left text-white">forum</i>
|
||||
<span class="ml-3.5 font-medium text-white">What is your favorite crayon to write on rocks with?</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-1">
|
||||
<a href="#" class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm bg-blue-500 hover:bg-blue-400 hover:shadow-lg">
|
||||
<i class="material-icons float-left text-white">forum</i>
|
||||
<span class="ml-3.5 font-medium text-white">How 2 write good</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="ml-1">
|
||||
<a href="#" class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm bg-blue-500 hover:bg-blue-400 hover:shadow-lg">
|
||||
<i class="material-icons float-left text-white">forum</i>
|
||||
<span class="ml-3.5 font-medium text-white">DAE hate the new design?</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-gray-400 font-bold text-sm mt-4 mb-2">Newest discussion</h2>
|
||||
<div class="space-y-1">
|
||||
<div class="ml-1">
|
||||
<a href="#" class="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-1 text-sm bg-blue-500 hover:bg-blue-400 hover:shadow-lg">
|
||||
<i class="material-icons float-left text-white">forum</i>
|
||||
<span class="ml-3.5 font-medium text-white">how do i get in contact with cashapp support</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
<%= render partial: 'notice_dismissal/messages/12' %>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user