From 999b95ba32e47c9775bb2de8dfd86ef5bfcf693f Mon Sep 17 00:00:00 2001 From: Hongyuan Ma Date: Sat, 30 Jun 2018 22:15:57 +0800 Subject: [PATCH] add Accordion when info too long --- front-end/src/component/info-list/index.css | 20 +++++- front-end/src/component/info-list/index.jsx | 76 +++++++++++++++------ front-end/src/page/detailInfo/index.css | 4 ++ front-end/src/util/basic-table/index.jsx | 6 +- web/apps/test_records/models.py | 6 +- web/db_tools/data/alias_data.py | 68 ++++++++++++++++++ web/pgperffarm/settings.py | 4 +- 7 files changed, 156 insertions(+), 28 deletions(-) diff --git a/front-end/src/component/info-list/index.css b/front-end/src/component/info-list/index.css index 4db74ba..2876f2e 100644 --- a/front-end/src/component/info-list/index.css +++ b/front-end/src/component/info-list/index.css @@ -2,5 +2,23 @@ font-size: 18px!important; } .clear-list-style { - list-style: none!important; + list-style-type: none!important; +} +.pre { + white-space:pre-wrap; +} + +/*Simulation style*/ +.accordion .title{ + font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; + line-height: 1.28571429em; + /*margin: calc(2rem - .14285714em) 0 1rem;*/ + font-weight: 700; + padding: 0; + font-size: 1.28571429rem; + color: #4183c4!important; +} + +.accordion .title i{ + color: #000!important; } \ No newline at end of file diff --git a/front-end/src/component/info-list/index.jsx b/front-end/src/component/info-list/index.jsx index 7548cbc..681fa2d 100644 --- a/front-end/src/component/info-list/index.jsx +++ b/front-end/src/component/info-list/index.jsx @@ -1,43 +1,83 @@ import React from 'react'; import './index.css'; -import {List, Item} from 'semantic-ui-react' +import {List, Item, Accordion} from 'semantic-ui-react' class InfoList extends React.Component { constructor(props) { super(props); } - scrollToAnchor(anchorName) { + scrollToAnchor(anchorName) { if (anchorName) { let anchorElement = document.getElementById(anchorName); - if(anchorElement) { anchorElement.scrollIntoView(); } + if (anchorElement) { + anchorElement.scrollIntoView(); + } } } render() { let info = this.props.info let name = this.props.name - let _list = Object.keys(info).map(key => { - let _list2 = 0 - return ( - - this.scrollToAnchor('name' + key)}>

{'name' + key}

 - {/*

{key}

*/} - - {info[key]} - - - ); - }); + let _list = [] + React.Children.forEach(Object.keys(info), (child, i) => { + // console.log('child: ' + i) + let Item + if(info[child].length >= 300) { + console.log(child+' is too long') + + let panel =[{ + title: child, + content: info[child], + }] + + Item = ( + + + + {/* this.scrollToAnchor('' + child)}>*/} + {/*

{'' + child}301

*/} + {/*/!*

{key}

*!/*/} + {/**/} + {/*{info[child]}*/} + {/**/} + + + ) + }else{ + Item = ( + + this.scrollToAnchor('' + child)}> +

{'' + child}

 + {/*

{key}

*/} + + {info[child]} + + + ) + } + + + _list.push({ + key: `label${i}`, + value: Item + }) + }) + + const itemComponents = _list.map(item => { + return
{item.value}
+ }) + return ( - this.scrollToAnchor(name + 'Info')}>

{name} Info

 + this.scrollToAnchor(name + 'Info')}> +

{name} Info

 - {_list} + {itemComponents} {/**/} {/*Link to somewhere*/} {/**/} @@ -47,8 +87,6 @@ class InfoList extends React.Component { - - Warranty ); } diff --git a/front-end/src/page/detailInfo/index.css b/front-end/src/page/detailInfo/index.css index 8d5a658..6da6a00 100644 --- a/front-end/src/page/detailInfo/index.css +++ b/front-end/src/page/detailInfo/index.css @@ -1,3 +1,7 @@ +.record-title{ + padding-left: 14px; +} + .card-container{ margin-left: 5px; margin-right: 5px; diff --git a/front-end/src/util/basic-table/index.jsx b/front-end/src/util/basic-table/index.jsx index 47c5198..21f2474 100644 --- a/front-end/src/util/basic-table/index.jsx +++ b/front-end/src/util/basic-table/index.jsx @@ -143,9 +143,9 @@ class BasicTable extends React.Component { Date - improved - quo - regressive + improvement + status quo + regression diff --git a/web/apps/test_records/models.py b/web/apps/test_records/models.py index 9b3e278..856eb53 100644 --- a/web/apps/test_records/models.py +++ b/web/apps/test_records/models.py @@ -222,10 +222,10 @@ class TestResult(models.Model): threads = models.IntegerField(verbose_name="threads", help_text="threads of the test result") MODE_CHOICE = ( - ('simple', 'simple'), - ('other', 'other'), + ('simple', 1), + ('other', 2), ) - mode = models.IntegerField(choices=MODE_CHOICE, default='simple', verbose_name="mode", help_text="test mode") + mode = models.IntegerField(choices=MODE_CHOICE, verbose_name="mode", help_text="test mode") add_time = models.DateTimeField(default=timezone.now, verbose_name="test result added time") class Meta: diff --git a/web/db_tools/data/alias_data.py b/web/db_tools/data/alias_data.py index e5fd402..d9a643b 100644 --- a/web/db_tools/data/alias_data.py +++ b/web/db_tools/data/alias_data.py @@ -1,6 +1,74 @@ row_data = [ + { + 'name': 'Avocado', + 'is_used': True + }, { 'name': 'Cabbage', 'is_used': True }, + { + 'name': 'Cucumber', + 'is_used': False + }, + { + 'name': 'Celery', + 'is_used': False + }, + { + 'name': 'Celtuce', + 'is_used': False + }, + { + 'name': 'Chaya', + 'is_used': False + }, + { + 'name': 'Chicory', + 'is_used': False + }, + { + 'name': 'Cress', + 'is_used': False + }, + { + 'name': 'Dandelion', + 'is_used': False + }, + { + 'name': 'Eggplant', + 'is_used': False + }, + { + 'name': 'Fiddlehead', + 'is_used': False + }, + { + 'name': 'Grape', + 'is_used': False + }, + { + 'name': 'Luffa', + 'is_used': False + }, + { + 'name': 'Kale', + 'is_used': False + }, + { + 'name': 'Kale', + 'is_used': False + }, + { + 'name': 'Pepper', + 'is_used': False + }, + { + 'name': 'Sorrel', + 'is_used': False + }, + { + 'name': 'Squash', + 'is_used': False + }, ] diff --git a/web/pgperffarm/settings.py b/web/pgperffarm/settings.py index ed73111..c6210ff 100644 --- a/web/pgperffarm/settings.py +++ b/web/pgperffarm/settings.py @@ -142,8 +142,8 @@ REST_FRAMEWORK = { DB_ENUM = { "mode":{ - "simple":'simple', - "other":'other' + "simple":1, + "other":2 }, "status": { "none": -1, -- 2.39.5