revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 15:22:41 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/application/dashboard/dashboard.css

109 lines
2.2 KiB
CSS
Raw Normal View History

Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
/**
* @provides phabricator-dashboard-css
*/
Dashboard UI stuffs Summary: - Make CSS more resilient with columns - Add objectlist css - Fix Maniphest list css Test Plan: Tested a number of different panels and dashboards, desktop, tablet, and mobile. {F159447} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9273
2014-05-23 22:44:51 +02:00
.dashboard-view {
margin: 16px;
}
.device-phone .dashboard-view {
margin: 8px;
}
[Redesign] Convert Dashboard Panels to ObjectBox Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView Test Plan: Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels. {F406170} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T8099 Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
.dashboard-view .phui-object-box {
margin: 0 0 16px 0;
}
Restrict movable panels to non-tab panels Summary: Fixes T12248. Adds a flag for movable panels, and only allows those to be moved. Also cleaned up some CSS rules missing once a panel was drug into a new position. Test Plan: Try to drag a tab panel content pane, cannot. Drag normal pane, see CSS, grab and drag same panel back, CSS looks the same. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12248 Differential Revision: https://secure.phabricator.com/D17356
2017-02-14 23:08:56 +01:00
.dashboard-box .phui-header-shell {
Lots of little minor CSS tweaks Summary: Lots of little details, fix workboard bg colors, darken up global backgrounds just a hair, add more "widgety" look to dashboard panels, remove underline on anchors on mobile. Also Fixes T12210 Test Plan: Use lots of pages on mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12210 Differential Revision: https://secure.phabricator.com/D17315
2017-02-05 21:45:27 +01:00
padding-top: 4px;
padding-bottom: 16px;
}
Restrict movable panels to non-tab panels Summary: Fixes T12248. Adds a flag for movable panels, and only allows those to be moved. Also cleaned up some CSS rules missing once a panel was drug into a new position. Test Plan: Try to drag a tab panel content pane, cannot. Drag normal pane, see CSS, grab and drag same panel back, CSS looks the same. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12248 Differential Revision: https://secure.phabricator.com/D17356
2017-02-14 23:08:56 +01:00
.dashboard-box .phui-header-header {
Add an Experimental Dark Mode to Phabricator Summary: Mostly this is an exercise to clean up our CSS and Celerity processor by making sure all important color decisions are generatable. It's somewhat resonable to use if you don't review code. Posting it up here mostly so I don't lose the work. Test Plan: Visit lots and lots of pages with dark mode on and off. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18227
2017-07-17 20:08:17 +02:00
color: {$blacktext};
Lots of little minor CSS tweaks Summary: Lots of little details, fix workboard bg colors, darken up global backgrounds just a hair, add more "widgety" look to dashboard panels, remove underline on anchors on mobile. Also Fixes T12210 Test Plan: Use lots of pages on mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12210 Differential Revision: https://secure.phabricator.com/D17315
2017-02-05 21:45:27 +01:00
}
.dashboard-view .phui-oi-empty .phui-info-view {
padding-top: 16px;
padding-bottom: 16px;
font-style: italic;
color: {$lightgreytext};
}
[Redesign] Convert Dashboard Panels to ObjectBox Summary: Moves Dashboard Panels to use PHUIObjectBoxView and PHUIHeaderView Test Plan: Tested the most common dashboards, Differential, Maniphest, Projects, Feed, Audit. Some edge cases (Legalpad, Macro) still are in progress. Tested laying out a new Dashboard, removing panels, moving panels. {F406170} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T8099 Differential Revision: https://secure.phabricator.com/D12873
2015-05-17 16:05:14 +02:00
.dashboard-view .phui-object-box .phui-object-box {
margin: 0;
Dashboard UI stuffs Summary: - Make CSS more resilient with columns - Add objectlist css - Fix Maniphest list css Test Plan: Tested a number of different panels and dashboards, desktop, tablet, and mobile. {F159447} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9273
2014-05-23 22:44:51 +02:00
}
Mobile-ize Dashboards Summary: Adds mobile support to dashboards. Test Plan: test various dashboard layouts, mobile and table breakpoints. Desktop too. Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9242
2014-05-21 21:08:14 +02:00
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
.aphront-multi-column-column-outer.half {
width: 50%;
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
}
Mobile-ize Dashboards Summary: Adds mobile support to dashboards. Test Plan: test various dashboard layouts, mobile and table breakpoints. Desktop too. Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9242
2014-05-21 21:08:14 +02:00
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
.aphront-multi-column-column-outer.third {
width: 33.34%;
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
}
Mobile-ize Dashboards Summary: Adds mobile support to dashboards. Test Plan: test various dashboard layouts, mobile and table breakpoints. Desktop too. Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9242
2014-05-21 21:08:14 +02:00
.device-desktop .aphront-multi-column-fluid .aphront-multi-column-2-up
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
.aphront-multi-column-column-outer.thirds {
width: 66.66%;
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
}
Restrict movable panels to non-tab panels Summary: Fixes T12248. Adds a flag for movable panels, and only allows those to be moved. Also cleaned up some CSS rules missing once a panel was drug into a new position. Test Plan: Try to drag a tab panel content pane, cannot. Drag normal pane, see CSS, grab and drag same panel back, CSS looks the same. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12248 Differential Revision: https://secure.phabricator.com/D17356
2017-02-14 23:08:56 +01:00
.grippable .aphront-multi-column-column .dashboard-box.phui-object-box {
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
cursor: move;
}
Restrict movable panels to non-tab panels Summary: Fixes T12248. Adds a flag for movable panels, and only allows those to be moved. Also cleaned up some CSS rules missing once a panel was drug into a new position. Test Plan: Try to drag a tab panel content pane, cannot. Drag normal pane, see CSS, grab and drag same panel back, CSS looks the same. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12248 Differential Revision: https://secure.phabricator.com/D17356
2017-02-14 23:08:56 +01:00
.grippable .aphront-multi-column-column .dashboard-box.phui-object-box:hover {
Make the Dashboard dropshadow a little lighter and turn panel management into a menu Summary: Depends on D20372. Ref T13272. - There's a very heavy dropshadow on panels right now that looks out of place. Reduce it a bit. - Panels currently have unlabeled pencil and trash icons. Turn this into a menu. I'm likely planning to add options like "Change Query..." to this menu to make managing some types of panels easier. Test Plan: {F6332838} Reviewers: amckinley Reviewed By: amckinley Maniphest Tasks: T13272 Differential Revision: https://secure.phabricator.com/D20373
2019-04-02 21:08:05 +02:00
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
}
Restrict movable panels to non-tab panels Summary: Fixes T12248. Adds a flag for movable panels, and only allows those to be moved. Also cleaned up some CSS rules missing once a panel was drug into a new position. Test Plan: Try to drag a tab panel content pane, cannot. Drag normal pane, see CSS, grab and drag same panel back, CSS looks the same. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12248 Differential Revision: https://secure.phabricator.com/D17356
2017-02-14 23:08:56 +01:00
.grippable .aphront-multi-column-column .dashboard-box.phui-object-box:hover
.dashboard-box {
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
box-shadow: none;
}
.aphront-multi-column-fluid .aphront-multi-column-column .drag-ghost {
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
list-style-type: none;
}
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
.aphront-multi-column-fluid .aphront-multi-column-column
.dashboard-panel-placeholder {
display: none;
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
}
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
.aphront-multi-column-fluid .aphront-multi-column-column.dashboard-column-empty
.dashboard-panel-placeholder {
display: block;
padding: 20px;
margin: 0 0 12px 0;
text-decoration: none;
border: 1px {$greyborder} dashed;
color: {$greytext};
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
}
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
.aphront-multi-column-fluid .aphront-multi-column-column.drag-target-list
.dashboard-panel-placeholder {
display: none;
Dashboards - add layout mode to dashboards Summary: This gets us the ability to specify a "layout mode" and which column a panel should appear in at panel add time. Changing the layout mode from a multi column view to a single column view or vice versa will reset all panels to the left most column. You can also drag and drop where columns appear via the "arrange" mode. We also have a new dashboard create flow. Create dashboard -> arrange mode. (As opposed to view mode.) This could all possibly use massaging. Fixes T4996. Test Plan: made a dashboard with panels in multiple columns. verified correct widths for various layout modes re-arranged collumns like whoa. Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T4996 Differential Revision: https://secure.phabricator.com/D9031
2014-05-16 04:12:40 +02:00
}
Dashboards - add remove functionality Summary: To get there, upgrade "headerless" to "headerMode". Add a new removepanel controller. Fixes T5084. Test Plan: removed some panels to much success Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5078, T5084 Differential Revision: https://secure.phabricator.com/D9156
2014-05-19 23:04:26 +02:00
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
.aphront-multi-column-fluid .aphront-multi-column-column-outer
.aphront-multi-column-column .phui-info-view {
margin: 0;
Dashboards - add remove functionality Summary: To get there, upgrade "headerless" to "headerMode". Add a new removepanel controller. Fixes T5084. Test Plan: removed some panels to much success Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: epriestley, Korvin Maniphest Tasks: T5078, T5084 Differential Revision: https://secure.phabricator.com/D9156
2014-05-19 23:04:26 +02:00
}
Modernize Dashboard UI and code Summary: Pulls everything over to two column UI and new edit pages. Removed history view and consolidated some pages. Test Plan: New Panel, Edit Panel. New Dashboard, Edit Dashboard, View Standalone pages. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15588
2016-04-03 01:02:13 +02:00
.dashboard-preview-box {
Touch up basic usability of Dashboards Summary: Ref T10390. This mostly shuffles layout into "View" and keepts "Manage" around for Edit/Copy/History. This feels better to me overall. Also tweaked some spacing and color. Test Plan: New Dashboard, edit Dashboard, shuffle panels. Create new panels. {F2684043} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10390 Differential Revision: https://secure.phabricator.com/D17326
2017-02-09 23:17:54 +01:00
margin: -16px -16px 16px;
}
.phui-info-view + .dashboard-preview-box {
margin-top: 0;
}
.drag-frame .phui-object-box {
box-shadow: {$dropshadow};
}
.drag-frame .phui-object-box .phui-object-box {
box-shadow: none;
}
Copy permalink