revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-30 10:42:41 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/phui/phui-list.css

177 lines
3.6 KiB
CSS
Raw Normal View History

PHUIList, PHUIDocument updates Summary: This diff covers a bit of ground. - PHUIDocumentExample has been added - PHUIDocument has been extended with new features - PhabricatorMenuView is now PHUIListView - PhabricatorMenuItemView is now PHUIItemListView Overall - I think I've gotten all the edges covered here. There is some derpi-ness that we can talk about, comments in the code. Responsive design is missing from the new features on PHUIDocument, will follow up later. Test Plan: Tested mobile and desktop menus, old phriction layout, new document views, new lists, and object lists. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6130
2013-06-05 17:41:43 +02:00
/**
* @provides phui-list-view-css
*/
.phui-list-item-header,
.phui-list-item-header a {
color: #9ca5b5;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255,255,255,0.90);
}
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
/* - Sidenav and Actions -------------------------------------------------------
Sidebar and Action Menus
*/
.phui-list-sidenav {
padding: 4px 0;
}
.phui-list-sidenav .phui-list-item-type-label .phui-list-item-name {
font-size: 12px;
font-weight: bold;
color: #9ca5b5;
text-transform: uppercase;
padding: 4px 8px 4px 8px;
display: block;
}
.phui-list-sidenav .phui-list-item-type-divider {
margin: 8px 8px 12px 8px;
border-bottom: 1px solid #e7e7e7;
}
.phui-list-sidenav .phui-list-item-icon {
height: 14px;
width: 14px;
display: inline-block;
position: absolute;
top: 4px;
}
.phui-list-sidenav .phui-list-item-icon + .phui-list-item-name {
padding-left: 20px;
}
.phui-list-sidenav .phui-list-item-has-icon {
margin: 0;
position: relative;
}
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
.phui-list-sidenav .phui-list-item-view {
overflow: hidden;
}
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
.phui-list-sidenav .phui-list-item-href {
display: block;
Diviner: improve links, book index, and atom view Summary: Ref T988. Minor improvements to diviner: link stuff to a valid endpoint which actually works; fix group names on the book index; improve the topics index for atom views. Test Plan: Clicked links in an article, viewed book index, viewed an article with long headers. Reviewers: btrahan, chad Reviewed By: chad CC: aran Maniphest Tasks: T988 Differential Revision: https://secure.phabricator.com/D6598
2013-07-28 22:07:30 +02:00
padding: 4px 16px;
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
clear: both;
color: #333333;
Diviner: improve links, book index, and atom view Summary: Ref T988. Minor improvements to diviner: link stuff to a valid endpoint which actually works; fix group names on the book index; improve the topics index for atom views. Test Plan: Clicked links in an article, viewed book index, viewed an article with long headers. Reviewers: btrahan, chad Reviewed By: chad CC: aran Maniphest Tasks: T988 Differential Revision: https://secure.phabricator.com/D6598
2013-07-28 22:07:30 +02:00
line-height: 18px;
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
}
.phui-list-sidenav .phui-list-item-has-icon .phui-list-item-href {
padding: 2px 10px;
}
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
.device-desktop .phui-list-sidenav .phui-list-item-href:hover {
Normalize sidebar list hover color Summary: This normalizes phui-list's hover color to {$blue} like action-list Test Plan: View a diviner document Reviewers: epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin, chad, avivey Differential Revision: https://secure.phabricator.com/D8593
2014-03-22 05:59:54 +01:00
background: {$blue};
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
color: white;
cursor: pointer;
text-decoration: none;
}
Replace Sprite-Icons with FontAwesome Summary: The removes the sprite sheet 'icons' and replaces it with FontAwesome fonts. Test Plan: - Grep for SPRITE_ICONS and replace - Grep for sprite-icons and replace - Grep for PhabricatorActionList and choose all new icons - Grep for Crumbs and fix icons - Test/Replace PHUIList Icon support - Test/Replace ObjectList Icon support (foot, epoch, etc) - Browse as many pages as I could get to - Remove sprite-icons and move remarkup to own sheet - Review this diff in Differential Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin, hach-que Differential Revision: https://secure.phabricator.com/D9052
2014-05-12 19:08:32 +02:00
.device-desktop .phui-list-sidenav .phui-list-item-href:hover .phui-icon-view {
color: #fff;
}
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
/* - Top, Full Width Navigations -----------------------------------------------
Sets a page or box with a top navbar
*/
.phui-list-view.phui-list-navbar {
list-style: none;
overflow: hidden;
border-bottom: 1px solid #e7e7e7;
Add top border back to section-headers Summary: This adds back the top border on section headers and cleans up the tab CSS just a hair. Test Plan: tested files, tasks, and custom field profile. Reviewers: epriestley, btrahan CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7378
2013-10-22 17:48:12 +02:00
background: {$lightgreybackground};
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
}
.phui-list-view.phui-list-navbar > li {
list-style: none;
float: left;
display: block;
border-right: 1px solid #e7e7e7;
}
.phui-list-view.phui-list-navbar > li > * {
display: block;
}
.phui-list-navbar .phui-list-item-href {
Add top border back to section-headers Summary: This adds back the top border on section headers and cleans up the tab CSS just a hair. Test Plan: tested files, tasks, and custom field profile. Reviewers: epriestley, btrahan CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7378
2013-10-22 17:48:12 +02:00
color: {$lightbluetext};
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
padding: 8px 16px;
font-size: 12px;
Add top border back to section-headers Summary: This adds back the top border on section headers and cleans up the tab CSS just a hair. Test Plan: tested files, tasks, and custom field profile. Reviewers: epriestley, btrahan CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7378
2013-10-22 17:48:12 +02:00
letter-spacing: 0.5px;
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
}
.phui-list-navbar .phui-list-item-selected .phui-list-item-href {
Add top border back to section-headers Summary: This adds back the top border on section headers and cleans up the tab CSS just a hair. Test Plan: tested files, tasks, and custom field profile. Reviewers: epriestley, btrahan CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7378
2013-10-22 17:48:12 +02:00
background: {$greybackground};
color: {$darkbluetext};
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
}
.phui-list-navbar .phui-list-item-href:hover {
Add top border back to section-headers Summary: This adds back the top border on section headers and cleans up the tab CSS just a hair. Test Plan: tested files, tasks, and custom field profile. Reviewers: epriestley, btrahan CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7378
2013-10-22 17:48:12 +02:00
background: #DEE0E4;
color: {$darkgreytext};
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
text-decoration: none;
}
.phui-list-navbar .phui-list-item-icon {
height: 14px;
width: 14px;
display: block;
Replace Sprite-Icons with FontAwesome Summary: The removes the sprite sheet 'icons' and replaces it with FontAwesome fonts. Test Plan: - Grep for SPRITE_ICONS and replace - Grep for sprite-icons and replace - Grep for PhabricatorActionList and choose all new icons - Grep for Crumbs and fix icons - Test/Replace PHUIList Icon support - Test/Replace ObjectList Icon support (foot, epoch, etc) - Browse as many pages as I could get to - Remove sprite-icons and move remarkup to own sheet - Review this diff in Differential Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin, hach-que Differential Revision: https://secure.phabricator.com/D9052
2014-05-12 19:08:32 +02:00
font-size: 14px;
PHUIListView Examples, CSS Summary: This adds examples and abstracts out CSS for common nav re-use. Test Plan: Tested DocumentExample and ListExample Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6138
2013-06-06 00:03:56 +02:00
}
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
.device-phone .phui-list-view.phui-list-navbar > li {
float: none;
PHUIDocument view for mobile devices. Summary: Adds collapsing of the sidebar, also allows you to say where it goes on mobile (above or below content). ToC for example, above. General Navbar, below. Up to you. Test Plan: Review UIExamples and Diviner. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6150
2013-06-06 21:47:40 +02:00
border: none;
PHUIList changes for responsive design Summary: Fixes some issues with lists and tablet/mobile layouts. Test Plan: shrink my screen Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6148
2013-06-06 20:59:14 +02:00
}
Adds status colors to navbar tabs Summary: Adds the abilit to set a status color of warning or fail to navbar tab lists (for objectheaders) Test Plan: uiexamples, photoshop Reviewers: epriestley Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7266
2013-10-08 04:29:05 +02:00
/* - Status Colors -------------------------------------------------------------
Colors for navbars
*/
.phui-list-item-warn .phui-list-item-href {
color: #bc7837;
}
.phui-list-item-fail .phui-list-item-href {
color: {$red};
}
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href,
.phui-list-item-warn .phui-list-item-href:hover {
background: {$lightyellow};
color: #bc7837;
}
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href,
.phui-list-item-fail .phui-list-item-href:hover {
background: {$lightred};
color: {$red};
}
.phui-list-item-warn.phui-list-item-selected .phui-list-item-href:hover {
background: #fcf0bd;
}
.phui-list-item-fail.phui-list-item-selected .phui-list-item-href:hover {
background: #f5d3d0;
}
Style text boxes and tab panels in dashboards Summary: Adds basic borders, spacing to tab panels and text boxes. Test Plan: Added some of each to my Dashboard. {F157622} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5078 Differential Revision: https://secure.phabricator.com/D9216
2014-05-20 19:53:16 +02:00
/* - Dashboards ------------------------------------------------------------ */
.dashboard-panel .phui-list-view.phui-list-navbar {
border-left: 1px solid {$lightblueborder};
border-right: 1px solid {$lightblueborder};
Dashboard CSS updates Summary: Updates ObjectList dashboarda and tweaks minor css items elsewhere. Test Plan: Test my dashboard, editing, and standalone Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9275
2014-05-24 06:48:15 +02:00
border-bottom: 1px solid {$thinblueborder};
Style text boxes and tab panels in dashboards Summary: Adds basic borders, spacing to tab panels and text boxes. Test Plan: Added some of each to my Dashboard. {F157622} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5078 Differential Revision: https://secure.phabricator.com/D9216
2014-05-20 19:53:16 +02:00
}
Copy permalink