extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-05 01:32:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

WIP EGroupware Tutorial:

Browse Source 
- Implement video navigation on popup
- Implement introduction video with user confirmation dialog based on session
- New layout for tutorials list both in sidebar and popup
- Separate tutorials styles to be able to set different styles base on templates
This commit is contained in:
Hadi Nategh 2015-10-14 14:17:09 +00:00
parent 375cf22ba6
commit 04a8cd4f60
14 changed files with 304 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
etemplate/templates/default/egw_tutorial.xet
View File

@ -3,14 +3,14 @@
<!-- $Id$ -->
<overlay>
<template id="etemplate.egw_tutorial" template="" lang="" group="0" version="15.1">
<grid id="list" width="97%" height="200" overflow="auto">
<grid id="list" width="99%" height="200" overflow="auto">
<columns>
<column/>
</columns>
<rows>
<row >
<vbox onclick="$row_cont[onclick]" align="center" statustext="$row_cont[title]">
<hbox background="$row_cont[thumbnail]" height="176px" width="99%" class="egw_tutorial_thumb">
<hbox background="$row_cont[thumbnail]" height="130px" width="99%" class="egw_tutorial_thumb">
<description value = "$row_cont[title]" class="egw_tutorial_title"/>
<hbox id="play" class="egw_tutorial_playBtn">
<hbox></hbox>
@ -20,8 +20,5 @@
</row>
</rows>
</grid>
<styles>
</styles>
</template>
</overlay>

53
etemplate/templates/default/etemplate2.css
View File

@ -1978,56 +1978,3 @@ div.flash-click-to-play-dialog {
overflow: hidden;
}
/*egw tutorial styles - start*/
span.egw_tutorial_title {
color: #FFFFFF;
font-weight: bold;
text-align: left;
width: 99%;
background-color: #434343;
border: 1px solid #B3B3B3;
padding-top: 4px;
padding-left: 5px;
border-radius: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
}
.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn{
background-color: #434343;
}
.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn> div{
border-left-color: white;
}
.egw_tutorial_thumb {
background-repeat: no-repeat;
background-position: -2px;
border-radius: 5px;
}
[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
#home-tutorial_play.egw_tutorial_playBtn{
display:block;
margin:20%;
border: 2px solid rgba(0,0,0,0.7);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
width: 40px;
height: 40px;
cursor: pointer;
}
[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
#home-tutorial_play.egw_tutorial_playBtn>div{
display:block;
position:relative;
top: 10px;
left: 45%;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid rgba(0,0,0,0.8);
}
/*egw tutorial styles - end*/

97
home/inc/class.home_tutorial_ui.inc.php
View File

@ -31,62 +31,67 @@ class home_tutorial_ui {
egw_framework::csp_frame_src_attrs(array('www.youtube.com'));
$tmpl = new etemplate_new('home.tutorial');
// Get tutorial object id
$tuid_indx = explode('-',$_GET['tuid']);
if (!is_array($content))
{
// read tutorials json file to fetch data
$tutorials = json_decode(self::getJsonData(), true);
$apps = array('introduction' => lang('Introduction'));
foreach ($tutorials as $app => $val)
{
// show only apps user has access to them
if (in_array($app, array_keys($GLOBALS['egw_info']['user']['apps']))) $apps [$app] = $app;
}
$sel_options = array(
'apps' => $apps,
// Get tutorial object id
$tuid_indx = explode('-',$_GET['tuid']);
$appName = $tuid_indx[0];
$lang = $tuid_indx[1];
$id = $tuid_indx[2];
}
else // set the first video of selected app
{
$appName = $content['list']['apps'];
$lang = $GLOBALS['egw_info']['user']['preferences']['common']['lang'];
$id ="0";
}
// read tutorials json file to fetch data
$tutorials = json_decode(self::getJsonData(), true);
$apps = array('introduction' => lang('Introduction'));
foreach ($tutorials as $app => $val)
{
// show only apps user has access to them
if (in_array($app, array_keys($GLOBALS['egw_info']['user']['apps']))) $apps [$app] = $app;
}
$sel_options = array(
'apps' => $apps,
);
// Check if the user has right to see the app's tutorial
if (in_array($appName, array_keys($GLOBALS['egw_info']['user']['apps'])) || $appName === "introduction")
{
// fallback to english video
$tutorial = $tutorials[$appName][$lang][$id]? $tutorials[$appName][$lang][$id]:
$tutorials[$appName]['en'][$id];
$list = array(
'apps' => $appName,
'0' => ''
);
// Check if the user has right to see the app's tutorial
if (in_array($tuid_indx[0], array_keys($GLOBALS['egw_info']['user']['apps'])) || $tuid_indx[0] === "introduction")
foreach ($tutorials[$appName][$lang] as $v)
{
// fallback to english video
$tutorial = $tutorials[$tuid_indx[0]][$tuid_indx[1]][$tuid_indx[2]]? $tutorials[$tuid_indx[0]][$tuid_indx[1]][$tuid_indx[2]]:
$tutorials[$tuid_indx[0]]['en'][$tuid_indx[2]];
$content = array (
'src' => $tutorial['src'],
'title' => $tutorial['title']
);
}
else
{
$content = array();
egw_framework::message(lang('You do not have permission to see this tutorial!'));
}
// If its the autoloading tutorial
if ($tuid_indx[3] === 'a')
{
$content ['discardbox'] = true;
$v ['onclick'] = 'app.home.tutorial_videoOnClick("'.$v['src'].'")';
array_push($list, $v);
}
$content = array (
'src' => $tutorial['src'],
'title' => $tutorial['title'],
'list' => $list
);
}
else
{
$content = array();
egw_framework::message(lang('You do not have permission to see this tutorial!'));
}
// If its the autoloading tutorial
if ($tuid_indx[3] === 'a')
{
$content ['discardbox'] = true;
}
$tmpl->exec('home.home_tutorial_ui.popup', $content,$sel_options,array(),array(),array(),2);
}
/**
* Ajax function to retrive selected app's tutorials based on prefered user lang
*
* @param type $_app application name
*/
function ajax_getAppsTutorials($_app)
{
$tutorials = json_decode(self::getJsonData(), true);
$lang = $GLOBALS['egw_info']['user']['preferences']['common']['lang'];
$response = egw_json_response::get();
$response->data($tutorials[$_app][$lang]?$tutorials[$_app][$lang]:$tutorials[$_app]['en']);
}
/**
* Ajax function to get videos links as json
*/

33
home/js/app.js
View File

@ -748,43 +748,18 @@ app.classes.home = AppJS.extend(
nm.resize();
},
/**
* Function to set apps and tutorials selectboxes values
*
* @param {type} egw
* @param {type} widget apps selectbox widget
*/
tutorial_appChange: function (egw, widget) {
var tutorials = etemplate2.getByApplication('home')[0].widgetContainer.getWidgetById('tutorials');
var sel_options = {};
if (widget)
{
this.egw.json('home.home_tutorial_ui.ajax_getAppsTutorials', [widget.get_value()], function(_data){
if(_data && tutorials)
{
for (var i=0;i<_data.length;i++)
{
sel_options[i] = {label:_data[i].title, value:_data[i].src};
}
tutorials.set_select_options(sel_options);
}
}).sendRequest();
}
},
/**
* Function to set video iframe base on selected tutorial from
* tutorials selectbox
* tutorials box
*
* @param {type} egw
* @param {type} widget tutorials selectbox
* @param {type} url
*/
tutorial_tutorialsChange: function (egw, widget)
tutorial_videoOnClick: function (_url)
{
var frame = etemplate2.getByApplication('home')[0].widgetContainer.getWidgetById('src');
if (frame)
{
frame.set_value(widget.get_value());
frame.set_value(_url);
}
},

39
home/templates/default/tutorial.xet
View File

@ -3,22 +3,35 @@
<!-- $Id$ -->
<overlay>
<template id="home.tutorial" template="" lang="" group="0" version="15.1">
<hbox height="87%">
<iframe id="src" height="100%" width="100%" seamless="true" fullscreen="true"/>
<hbox height="87%" class="tutorial_popup">
<hbox class="tutorial_videoList">
<grid id="list" classs="egwGridView_grid" resize_ratio="0" width="190px">
<columns>
<column/>
</columns>
<rows>
<row class="th" part="header">
<menulist>
<menupopup id="apps" label="Applications" statustext="Please select application name" onchange="1"/>
</menulist>
</row>
<row>
<vbox onclick="$row_cont[onclick]" align="center" statustext="$row_cont[title]">
<hbox background="$row_cont[thumbnail]" height="130px" width="98%" class="egw_tutorial_thumb">
<description value = "$row_cont[title]" class="egw_tutorial_title"/>
<hbox id="play" class="egw_tutorial_playBtn">
<hbox></hbox>
</hbox>
</hbox>
</vbox>
</row>
</rows>
</grid>
</hbox>
<iframe id="src" height="100%" seamless="true" width="73%" fullscreen="true"/>
</hbox>
<hbox class="dialogFooterToolbar">
<button align="left" statustext="Close this window" label="Close" id="button[close]" onclick="window.close()" image="close" background_image="1"/>
<hbox disabled="@discardbox">
<menulist>
<menupopup id="apps" label="Applications" statustext="Please select application name" onchange="app.home.tutorial_appChange"/>
</menulist>
<menulist>
<menupopup id="tutorials" label="Tutorilas" statustext="Please select a tutorial" onchange="app.home.tutorial_tutorialsChange"/>
</menulist>
</hbox>
<hbox disabled="!@discardbox" class="discard_checkbox">
<checkbox id="checkbox" label="Do not show this video next time" onchange="app.home.tutorial_autoloadDiscard"/>
</hbox>
</hbox>
</template>
</overlay>

2
phpgwapi/inc/class.hooks.inc.php
View File

@ -398,7 +398,7 @@ class hooks
),
'menuOpened' => true
);
display_sidebox($appname, lang('EGroupware Tutorial'), $file);
display_sidebox($appname, lang('Video Tutorials'), $file);
}
}
}

27
phpgwapi/js/framework/fw_browser.js
View File

@ -175,10 +175,31 @@ var fw_browser = Class.extend({
// Open tutorial popup with an introduction video about egroupware
// the popup can be discarded for the next time show if user
// check the discard checkbox
if (!egw.preference('egw_tutorial_autoload', 'common'))
// select "Never" or can select "Later" and the introduction
// dialog will show upon the next session refresh
if (!egw.preference('egw_tutorial_noautoload', 'common') && !sessionStorage.getItem('egw_tutorial_visited'))
{
egw.open_link(egw.link('/index.php', 'menuaction=home.home_tutorial_ui.popup&tuid=introduction-'+egw.preference('lang')+'-0-a'),'_blank','750x580');
sessionStorage.setItem('egw_tutorial_visited', true);
var buttons = [
{text:"Show", id:"show", default:"true"},
{text:"Later", id:"later"},
{text:"Never", id:"never"}
];
et2_dialog.show_dialog(function (_button_id)
{
if (_button_id == "show" )
{
egw.open_link(egw.link('/index.php', 'menuaction=home.home_tutorial_ui.popup&tuid=introduction-'+egw.preference('lang')+'-0-a'),'_blank','750x580');
}
else if(_button_id == "never")
{
egw.set_preference('common', 'egw_tutorial_noautoload',true);
}
},
egw.lang('We would like to introduce you to EGroupware by showing a short introduction video.'),
egw.lang('Introduction'),
{}, buttons, et2_dialog.QUESTION_MESSAGE, undefined, egw);
}
});

8
phpgwapi/js/jsapi/app_base.js
View File

@ -997,12 +997,12 @@ var AppJS = Class.extend(
* {
* "mail":{
* "en":[
* {src:"https://www.youtube.com/embed/mCDJndpjO40", thumbnail:"http://img.youtube.com/vi/mCDJndpjO40/1.jpg", "title":"PGP Encryption"},
* {src:"https://www.youtube.com/embed/mCDJndpjO", thumbnail:"http://img.youtube.com/vi/mCDJndpjO/1.jpg", "title":"Subscription", top:true},
* {src:"https://www.youtube.com/embed/mCDJndpjO40", thumbnail:"http://img.youtube.com/vi/mCDJndpjO40/0.jpg", "title":"PGP Encryption"},
* {src:"https://www.youtube.com/embed/mCDJndpjO", thumbnail:"http://img.youtube.com/vi/mCDJndpjO/0.jpg", "title":"Subscription", top:true},
* ],
* "de":[
* {src:"https://www.youtube.com/embed/m40", thumbnail:"http://img.youtube.com/vi/m40/1.jpg", "title":"PGP Verschlüsselung"},
* {src:"https://www.youtube.com/embed/mpjO", thumbnail:"http://img.youtube.com/vi/mpjO/1.jpg", "title":"Ordner Abonnieren", top:true},
* {src:"https://www.youtube.com/embed/m40", thumbnail:"http://img.youtube.com/vi/m40/0.jpg", "title":"PGP Verschlüsselung"},
* {src:"https://www.youtube.com/embed/mpjO", thumbnail:"http://img.youtube.com/vi/mpjO/0.jpg", "title":"Ordner Abonnieren", top:true},
* ]
* }
* }

92
phpgwapi/templates/default/def_tutorials.less Normal file
View File

@ -0,0 +1,92 @@
/**
* EGroupware: CSS with less preprocessor
*
* Definitions for tutorials
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi NAtegh <hn@stylite.de>
* @package phpgwapi
* @version $Id$
*/
span.egw_tutorial_title {
color: black;
font-weight: bold;
text-align: left;
width: 95%;
background-color: #D6DEF0;
border: 1px solid #B3B3B3;
padding-top: 4px;
padding-left: 5px;
border-radius: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
}
.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn{
background-color: #FF0000;
opacity: 0.68;
}
.egw_tutorial_thumb:hover [id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
.egw_tutorial_thumb:hover #home-tutorial_play.egw_tutorial_playBtn> div{
border-left-color: white;
}
.egw_tutorial_thumb {
background-repeat: no-repeat;
background-position: -2px;
border-radius: 5px;
}
[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn,
#home-tutorial_play.egw_tutorial_playBtn{
display:block;
margin:10%;
border: 2px solid rgba(0,0,0,0.7);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
width: 40px;
height: 40px;
cursor: pointer;
}
[id^="egw_tutorial_"][id$="_play"].egw_tutorial_playBtn> div,
#home-tutorial_play.egw_tutorial_playBtn>div{
display:block;
position:relative;
top: 10px;
left: 45%;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid rgba(0,0,0,0.8);
}
[id^="egw_tutorial_"][id$="sidebox_list"] {
overflow-x: hidden;
overflow-y: auto;
}
#home-tutorial_list {
float:left;
.egw_tutorial_thumb {
display:block;
}
}
#home-tutorial_src {
border-left: 6px solid #E0E0E0;
}
.tutorial_popup {
background-color:white;
padding-top: 5px;
overflow-y: hidden;
}
.tutorial_videoList {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
display: inline-block !important;
}

40
pixelegg/css/mobile.css
View File

@ -47,6 +47,7 @@
* Stefan Reinhardt
*/
/*@import (less) "../../etemplate/templates/default/etemplate2.css";*/
@import "../../phpgwapi/templates/default/def_tutorials.css";
@media all {
/**
* Top level
@ -2196,7 +2197,6 @@ body {
* @package pixelegg
* @version $Id$
*/
@import-once "def_colors.less";
#socialMedia {
position: relative;
bottom: 20px;
@ -4274,7 +4274,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@ -4298,7 +4298,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12.100000000000001px;
font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@ -4694,7 +4694,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@ -4866,7 +4866,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@ -5126,6 +5126,7 @@ td.message span.message {
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper {
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper .et2_label {
padding-bottom: 5px;
@ -6354,6 +6355,33 @@ a.textSidebox {
.pageGenTime > span:last-child:after {
content: "";
}
/**
* EGroupware: Pixelegg styles
*
* Pixelegg definitions for tutorials
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi NAtegh <hn@stylite.de>
* @package phpgwapi
* @version $Id$
*/
span.egw_tutorial_title {
color: #FFFFFF;
font-weight: bold;
text-align: left;
width: 95%;
background-color: #434343;
border: 1px solid #B3B3B3;
padding-top: 4px;
padding-left: 5px;
border-radius: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
}
/*@import "../less/layout_buttons_global.less";*/
/*@import "../less/layout_chosen.less";*/
/*@import "../less/layout_messages.less";*/
@ -6926,7 +6954,7 @@ a.textSidebox {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;

38
pixelegg/css/pixelegg.css
View File

@ -36,6 +36,7 @@
* Stefan Reinhardt
*/
/*@import (less) "../../etemplate/templates/default/etemplate2.css";*/
@import "../../phpgwapi/templates/default/def_tutorials.css";
@media all {
/**
* Top level
@ -2185,7 +2186,6 @@ body {
* @package pixelegg
* @version $Id$
*/
@import-once "def_colors.less";
#socialMedia {
position: relative;
bottom: 20px;
@ -4263,7 +4263,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@ -4287,7 +4287,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12.100000000000001px;
font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@ -4683,7 +4683,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@ -4855,7 +4855,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;
@ -5115,6 +5115,7 @@ td.message span.message {
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper {
border-bottom-left-radius: 10px;
overflow-x: hidden;
}
.egw_fw_ui_category_content .egwTutorial div#list_grid_wrapper .et2_label {
padding-bottom: 5px;
@ -6343,6 +6344,33 @@ a.textSidebox {
.pageGenTime > span:last-child:after {
content: "";
}
/**
* EGroupware: Pixelegg styles
*
* Pixelegg definitions for tutorials
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi NAtegh <hn@stylite.de>
* @package phpgwapi
* @version $Id$
*/
span.egw_tutorial_title {
color: #FFFFFF;
font-weight: bold;
text-align: left;
width: 95%;
background-color: #434343;
border: 1px solid #B3B3B3;
padding-top: 4px;
padding-left: 5px;
border-radius: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
}
/*@import "../less/layout_buttons_global.less";*/
/*@import "../less/layout_chosen.less";*/
/*@import "../less/layout_messages.less";*/

1
pixelegg/less/layout_definitions.less
View File

@ -69,4 +69,5 @@
@import "layout_traditional.less";
@import "layout_tutorials.less";

1
pixelegg/less/layout_raster_sidebar.less
View File

@ -523,6 +523,7 @@
.egwTutorial div#list_grid_wrapper {
border-bottom-left-radius: 10px;
overflow-x:hidden;
.et2_label {
padding-bottom: 5px;
}

31
pixelegg/less/layout_tutorials.less Normal file
View File

@ -0,0 +1,31 @@
/**
* EGroupware: Pixelegg styles
*
* Pixelegg definitions for tutorials
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi NAtegh <hn@stylite.de>
* @package phpgwapi
* @version $Id$
*/
@import (reference) "definitions.less";
@import "../../phpgwapi/templates/default/def_tutorials.css";
span.egw_tutorial_title {
color: #FFFFFF;
font-weight: bold;
text-align: left;
width: 95%;
background-color: #434343;
border: 1px solid #B3B3B3;
padding-top: 4px;
padding-left: 5px;
border-radius: 2px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
}