Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 01:18:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 84

Sidebar, titles, and descriptions should now force wrap or ellipsis (#905)

Browse source 
* Sidebar, titles, and descriptions should now force wrap or ellipsis

* Fixing lint issue
This commit is contained in:
Kyle Knight 2017-01-11 14:35:45 -06:00 committed by GitHub
parent cf805aa66c
commit 38120b9fca
12 changed files with 51 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/components/packs/EditPackFormWrapper/_styles.scss
View file

@ -4,6 +4,8 @@
}
&__title {
@include ellipsis(80%);
.kolidecon {
color: $accent-dark;
}
@ -15,5 +17,6 @@
line-height: 2;
color: $text-medium;
max-width: 800px;
word-wrap: break-word;
}
}

2
frontend/components/packs/PacksList/Row/_styles.scss
View file

@ -28,6 +28,8 @@
}
&__td-pack-name {
@include ellipsis(110px);
display: table-cell;
text-align: left;
}

2
frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx
View file

@ -56,7 +56,7 @@ class QueriesListRow extends Component {
value={checked}
/>
</td>
<td>{name}</td>
<td className={`${baseClass}__name`}>{name}</td>
<td className={`${baseClass}__author-name`}>{authorName}</td>
<td>{lastModifiedDate}</td>
</ClickableTableRow>

5
frontend/components/queries/QueriesList/QueriesListRow/_styles.scss
View file

@ -21,4 +21,9 @@
margin: 0;
}
}
&__name {
@include ellipsis(120px);
display: table-cell;
}
}

2
frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx
View file

@ -58,7 +58,7 @@ class ScheduledQueriesListItem extends Component {
value={checked}
/>
</td>
<td>{name}</td>
<td className="scheduled-queries-list__query-name">{name}</td>
<td>{interval}</td>
<td><PlatformIcon name={platform} /></td>
<td>{version}</td>

5
frontend/components/queries/ScheduledQueriesList/_styles.scss
View file

@ -161,4 +161,9 @@
color: $text-dark;
}
}
&__query-name {
@include ellipsis(110px);
display: table-cell;
}
}

6
frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
View file

@ -31,8 +31,10 @@ const PackDetailsSidePanel = ({ onUpdateSelectedPack, pack, scheduledQueries = [
return (
<SecondarySidePanelContainer className={baseClass}>
<Icon className={`${baseClass}__pack-icon`} name="packs" />
<span className={`${baseClass}__pack-name`}>{pack.name}</span>
<h2 className={`${baseClass}__pack-name`}>
<Icon className={`${baseClass}__pack-icon`} name="packs" />
<span>{pack.name}</span>
</h2>
<Slider
activeText="ENABLED"
inactiveText="DISABLED"

21
frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
View file

@ -53,16 +53,19 @@ class ScheduledQueriesSection extends Component {
const queriesToRender = showAllQueries ? scheduledQueries : take(scheduledQueries, DEFAULT_NUM_QUERIES);
return (
<div>
<div className={`${baseClass}__scheduled-queries`}>
<p className={`${baseClass}__section-label`}>Queries</p>
{queriesToRender.map((scheduledQuery) => {
return (
<div key={`scheduled-query-${scheduledQuery.id}`}>
<Icon className={`${baseClass}__query-icon`} name="query" />
<span className={`${baseClass}__query-name`}>{scheduledQuery.name}</span>
</div>
);
})}
<ul className={`${baseClass}__queries-list`}>
{queriesToRender.map((scheduledQuery) => {
return (
<li key={`scheduled-query-${scheduledQuery.id}`}>
<Icon className={`${baseClass}__query-icon`} name="query" />
<span className={`${baseClass}__query-name`}>{scheduledQuery.name}</span>
</li>
);
})}
</ul>
{renderShowMoreQueries()}
</div>
);

10
frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
View file

@ -4,6 +4,7 @@
&__description {
color: $text-medium;
font-size: 14px;
word-wrap: break-word;
}
&__section-label {
@ -42,6 +43,7 @@
}
&__pack-name {
@include ellipsis(250px);
color: $text-dark;
font-size: 18px;
font-weight: $bold;
@ -54,8 +56,16 @@
margin-right: 15px;
}
&__queries-list {
list-style: none;
margin: 0;
padding: 0;
}
&__query-name {
@include ellipsis(240px);
color: $text-medium;
font-size: 16px;
vertical-align: bottom;
}
}

2
frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
View file

@ -62,7 +62,7 @@ class QueryDetailsSidePanel extends Component {
wrapEnabled
/>
<h2>Description</h2>
<p>{description}</p>
<p className={`${baseClass}__description`}>{description}</p>
<h2>Packs</h2>
{renderPacks()}
</SecondarySidePanelContainer>

5
frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
View file

@ -2,6 +2,7 @@
padding: 20px;
h1 {
@include ellipsis(250px);
margin: 0 0 12px;
font-size: 18px;
font-weight: $bold;
@ -33,6 +34,10 @@
margin-bottom: 12px;
}
&__description {
word-wrap: break-word;
}
.button {
width: 100%;
}

2
frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
View file

@ -1,5 +1,6 @@
.search-pack-query {
&__title {
@include ellipsis(250px);
font-size: 18px;
font-weight: $bold;
letter-spacing: -0.5px;
@ -17,6 +18,7 @@
&__description {
margin: 0 0 30px;
word-wrap: break-word;
h2 {
font-size: 16px;