Organizations list styling

src/styles/_homepage.sass

@@ -126,11 +126,8 @@
 					size: 1.2em
 					weight: 400
 				display: inline-block
-				padding: 15px 20px 10px 20px
+				padding: 10px 10px
-				border-bottom: 3px solid transparent
 
-				&:hover
-					border-color: $color-success
 				a
 					color: $color-success
 					text-decoration: none

src/styles/_organizations.sass

@@ -0,0 +1,35 @@
+body.organizations
+	ul#sub-nav-tabs__list
+		align-items: center
+		display: flex
+
+		li.result
+			padding: 10px 20px
+		li.create
+			margin-left: auto
+
+
+	#side
+		.box
+			+container-box
+			padding: 10px 20px
+			margin: 20px 10px
+
+	#item-details
+		.organization
+			label
+				display: block
+				margin-top: 10px
+
+		.input-group,
+		textarea,
+		input
+			width: 100%
+
+		input
+			font-size: 1.1em
+
+
+	.org-admin
+		#admin-name
+			padding: 10px 0

src/styles/_project-dashboard.sass

@@ -8,28 +8,18 @@
 
 		section#sub-nav-tabs.home,
 		section#sub-nav-tabs.projects
-			background-color: $color-background-light
+			background-color: white
 			border-bottom: thin solid $color-background-dark
 
 			li.nav-tabs__list-tab
 				padding: 15px 20px 10px 20px
 
-				&:hover
-					border-color: rgba($color-primary, .4)
-				&.active
-					border-color: $color-primary
-					color: $color-primary-dark
-					a, i
-						color: $color-primary-dark
-
-				span
-					color: $color-text-dark-secondary
-
 	section#home
 		background-color: $color-background-dark
 
 	section.nav-tabs__tab
 		display: none
+		background-color: $color-background-light
 
 		&.active
 			display: block

src/styles/_project.sass

@@ -1212,6 +1212,9 @@ section.node-preview.group
 			.node-details-meta-list
 				display: inline-block
 
+				> li
+					padding: 0 5px
+
 			.node-details-meta-actions
 				display: inline-block
 

src/styles/base.sass

@@ -1090,8 +1090,8 @@ button, .btn
 
 
 	#cloud-search, .tt-hint
+		+text-overflow-ellipsis
 		background-color: transparent
-		width: 100%
 		outline: none
 		border: thin solid transparent
 		border-bottom: 3px solid transparent
@@ -1103,7 +1103,6 @@ button, .btn
 		padding: 0 20px 0 40px
 		min-height: 32px
 		color: white
-		+text-overflow-ellipsis
 		transition: border 100ms ease-in-out
 
 		&:focus

src/styles/main.sass

@@ -14,6 +14,7 @@
 @import _services
 @import _stats
 @import _search
+@import _organizations
 
 /* services, about, etc */
 @import _pages

src/templates/_macros/_menu.pug

@@ -62,6 +62,7 @@ li(class="dropdown")
 				title="My Projects")
 				i.pi-star
 				| My Projects
+
 		| {% if current_user.has_organizations() %}
 		li
 			a.navbar-item(
@@ -70,20 +71,24 @@ li(class="dropdown")
 				i.pi-users
 				| My Organizations
 		| {% endif %}
+
 		li
 			a.navbar-item(
 				href="{{ url_for('settings.profile') }}"
 				title="Settings")
 				i.pi-cog
 				| Settings
+
 		li
 			a.navbar-item(
 				href="{{ url_for('settings.billing') }}"
 				title="Billing")
 				i.pi-credit-card
 				| Subscription
+
 		li.divider(role="separator")
 		| {% endif %}
+
 		li
 			a.navbar-item(
 				href="{{ url_for('users.logout') }}")

src/templates/_macros/_navigation.pug

@@ -5,11 +5,23 @@ section#nav-tabs
 		li.nav-tabs__list-tab(
 			class="{% if title == 'homepage' %}active{% endif %}")
 			a(href="{{ url_for('main.homepage') }}") Activity
-		li.nav-tabs__list-tab(
+
-			class="{% if title == 'dashboard' %}active{% endif %}")
-			a(href="{{ url_for('projects.index') }}") My Projects
 		li.nav-tabs__list-tab(
 			class="{% if title == 'home' %}active{% endif %}")
 			a(href="{{ url_for('projects.home_project') }}") Home
 
+		li.nav-tabs__list-tab(
+			class="{% if title == 'dashboard' %}active{% endif %}")
+			a(href="{{ url_for('projects.index') }}") My Projects
+
+		| {% if current_user.has_organizations() %}
+		li.nav-tabs__list-tab(
+			class="{% if title == 'organizations' %}active{% endif %}")
+			a(
+				href="{{ url_for('pillar.web.organizations.index') }}",
+				title="My Organizations")
+				| My Organizations
+		| {% endif %}
+
+
 | {% endmacro %}

src/templates/organizations/index.pug

@@ -1,59 +1,74 @@
 | {% extends 'layout.html' %}
-| {% block bodyattrs %}{{ super() }} data-context='organizations'{% endblock %}
+| {% from '_macros/_navigation.html' import navigation_tabs %}
+
+| {% set title = 'organizations' %}
 | {% block page_title %}Organizations{% endblock %}
 
+| {% block og %}
+meta(property="og:title", content="Dashboard")
+meta(name="twitter:title", content="Blender Cloud")
+
+meta(property="og:url", content="https://cloud.blender.org/{{ request.path }}")
+meta(property="og:type", content="website")
+
+meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}")
+meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/backgrounds/cloud_services_oti.jpg')}}")
+| {% endblock %}
+
 | {% block body %}
-#app-main
+.dashboard-container
-	#col_main.organization-index
+	section#main
-		#col_main-content
+		| {{ navigation_tabs(title) }}
-			.col_header.item-list-header
-				i.pi-cloud
-				| Your organizations
 
-			.item-list.col-scrollable
+		section#projects
-				.table
-					.table-head
-						.table-row
-							.table-cell.item-name
-								span.collapser(title="Collapse name column") Name
-							.table-cell.item-priority
-								span.collapser(title="Collapse priority column") Members
-							.table-cell.item-priority
-								span.collapser(title="Collapse priority column") Pending Members
 
-					.table-body
-						| {% for organization in organizations['_items'] %}
-						| {% set link_url = url_for('pillar.web.organizations.view_embed', organization_id=organization._id) %}
-						.table-row(id="organization-{{ organization._id }}")
-							.table-cell.item-name
-								a(data-organization-id="{{ organization._id }}",
-									href="{{ link_url }}",
-									class="organization-link")
-									span(class="organization-name-{{ organization._id }}") {{ organization.name }}
-							.table-cell.item-members
-								a(data-organization-id="{{ organization._id }}",
-									href="{{ link_url }}",
-									class="organization-link")
-									span(class="organization-projects-{{ organization._id }}") {{ organization.members|hide_none|count }}
-							.table-cell.item-pending-members
-								a(data-organization-id="{{ organization._id }}",
-									href="{{ link_url }}",
-									class="organization-link")
-									span(class="organization-projects-{{ organization._id }}") {{ organization.unknown_members|hide_none|count }}
-						| {% endfor %}
-
-				#item-action-panel
 			| {% if can_create_organization %}
-					button.btn(onclick='createNewOrganization(this)') Create new organization
+			section#sub-nav-tabs.projects
-					#create_organization_result_panel
+				ul#sub-nav-tabs__list
+					li.result#create_organization_result_panel
+					li.create
+						button.btn.btn-success(onclick='createNewOrganization(this)')
+							i.pi-plus
+							| Create Organization
 			| {% endif %}
 
-	#col_right
+			section.nav-tabs__tab.active#own_projects
-		.col_header
+				ul.projects__list
-			span.header_text
+					| {% if organizations %}
-		#item-details.col-scrollable
+					| {% for organization in organizations['_items']  %}
-			.item-details-empty
+					| {% set link_url = url_for('pillar.web.organizations.view_embed', organization_id=organization._id) %}
-				| Select an organization
+					li.projects__list-item(
+						data-url="{{ link_url }}",
+						id="organization-{{ organization._id }}")
+						a.projects__list-thumbnail(
+							href="{{ link_url }}")
+							i.pi-users
+						.projects__list-details
+							a.title(href="{{ link_url }}")
+								| {{ organization.name }}
+
+							ul.meta
+								li(title="Members")
+									| {{ organization.members|hide_none|count }} Member{{ organization.members|hide_none|count|pluralize }}
+									| {% if (organization.unknown_members|count) != 0 %}
+									| ({{ organization.unknown_members|hide_none|count }} pending)
+									| {% endif %}
+								li(title="Seats")
+									| {{ organization.seat_count }} Seat{{ organization.seat_count|pluralize }}
+
+					| {% endfor %}
+					| {% else %}
+					li.projects__list-item
+						a.projects__list-thumbnail
+							i.pi-blender-cloud
+						.projects__list-details
+							span Create an Organization to get started!
+					| {% endif %}
+
+	section#side
+		section.box
+			#item-details
+
 | {% endblock %}
 
 
@@ -102,7 +117,6 @@ script.
 		$.get(item_url, function(item_data) {
 			statusBarClear();
 			$('#item-details').html(item_data);
-			$('#col_right .col_header span.header_text').text('Organization details');
 
 			current_item
 				.removeClass(clean_classes)
@@ -143,6 +157,7 @@ script.
 	{% if open_organization_id %}
 		$(function() { item_open('{{ open_organization_id }}', false); });
 	{% endif %}
+
 	{% if can_create_organization %}
 	function createNewOrganization(button) {
 		$(button)

src/templates/organizations/view_embed.pug

@@ -29,15 +29,16 @@
 				type="text",
 				placeholder="Organization's location",
 				value="{{ organization.location | hide_none }}")
+
 		| {% if can_super_edit %}
-		.input-group.text-danger
+		.input-group
 			label(for='org-seat-count-field') Seat count
 			input.item-location.input-transparent#org-seat-count-field(
 				name="seat_count",
 				type="text",
 				placeholder="Seat count",
 				value="{{ organization.seat_count | hide_none }}")
-		.input-group.text-danger
+		.input-group
 			label(for='org-roles-field') Roles
 			input.item-location.input-transparent#org-roles-field(
 				name="org_roles",
@@ -45,8 +46,9 @@
 				placeholder="Organization roles",
 				value="{{ organization.org_roles | hide_none | sort | join(' ') }}")
 		| {% endif %}
-		.input-group
+
-			label.item-admin-user Org admin
+		.input-group.org-admin
+			label.item-admin-user Organization Administrator
 			p#admin-name
 				a(href='javascript:showAdminPicker()', title='Click to choose another administrator') {{ admin_user.full_name }}
 			p#admin-picker
@@ -55,12 +57,13 @@
 					type='text',
 					placeholder='Search for a new administrator')
 				a(href='javascript:hideAdminPicker()')
-					i.pi-cancel.text-danger
+					span.text-danger Cancel
 			script $('#admin-picker').hide();
+
 		.input-group
-			button#item-save.btn.btn-default.btn-block(type='submit')
+			button#item-save.btn.btn-success.btn-block(type='submit')
 				i.pi-check
-				| Save Organization
+				| Save Changes
 		| {% else %}
 		p.item-name {{ organization.name | hide_none }}
 		| {% if organization.description %}
@@ -76,6 +79,8 @@
 		p.item-admin-user Organization administrator: {{ admin_user.full_name }}
 		| {% endif %}
 
+hr
+
 h4 Properties
 .table.item-properties
 	.table-body
@@ -92,8 +97,11 @@
 			.table-cell(title='Unable to edit, determined by subscription')
 				| {{ organization.org_roles | hide_none | sort | join(', ') }}
 
-.members
+hr
+
 h4 Organization members
+.members
+
 	| {% if can_edit %}
 	.sharing-users-search
 		.form-group
@@ -102,6 +110,7 @@
 				type='text',
 				placeholder='Add member by name')
 	| {% endif %}
+
 	ul.sharing-users-list
 		| {% for member in members %}
 		li.sharing-users-item(
@@ -131,10 +140,13 @@
 				| {% endif %}
 		| {% else %}
 		li
-				p.small No members yet
+			p.text-warning No members yet
 		| {% endfor %}
+
 	| {% if organization.unknown_members %}
-		h5 Pending members (i.e. without Blender Cloud account)
+	hr
+
+	p Pending Members (i.e. without Blender Cloud account)
 	ul.sharing-users-list.unknown-members
 		| {% for email in organization.unknown_members %}
 		li.sharing-users-item.unknown-member(data-user-email='{{ email }}')
@@ -149,25 +161,29 @@
 				| {% endif %}
 		| {% endfor %}
 	| {% endif %}
+
 	| {% if can_edit %}
-		h5 Batch-add members by email address
+	br
+
+	p Batch-add members by email address:
 	form#batch_add_form(onsubmit="return batchAddUsers()")
 		.input-group
-				textarea.item-description.input-transparent(
+			textarea.item-description(
 				name="emails",
 				type="text",
 				rows=1,
-					placeholder="Email addresses, separated by space/enter")
+				placeholder="Enter the email addresses separated by space or a new line")
+
 		.input-group
-				button.btn.btn-default.btn-block(type='submit')
+			button.btn.btn-info.btn-block(type='submit')
-					i.pi-check
+				i.pi-plus
-					| Add members
+				| Add Members
 	| {% endif %}
 
 .action-result-panel
 
-#item-view-feed
 | {% if config.DEBUG %}
+#item-view-feed
 	.debug-info
 		a.debug-info-toggle(role='button',
 			data-toggle='collapse',

src/templates/projects/index_dashboard.pug

@@ -42,7 +42,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
 					| {% if current_user.has_cap('subscriber') %}
 					li.create(
 						data-url="{{ url_for('projects.create') }}")
-						a#project-create(
+						a.btn.btn-success#project-create(
 							href="{{ url_for('projects.create') }}")
 							i.pi-plus
 							| Create Project