mirror of
https://github.com/chatopera/cosin.git
synced 2025-08-01 16:38:02 +08:00
#58 维护联系人UI添加
This commit is contained in:
Kyle
parent
b698526a6d
commit
1ae72fd33f
@ -193,7 +193,7 @@ public class ContactsController extends Handler{
|
||||
@Menu(type = "contacts" , subtype = "contacts")
|
||||
public ModelAndView detail(ModelMap map , HttpServletRequest request , @Valid String id) {
|
||||
map.addAttribute("contacts", contactsRes.findOne(id)) ;
|
||||
return request(super.createRequestPageTempletResponse("/apps/business/contacts/detail"));
|
||||
return request(super.createAppsTempletResponse("/apps/business/contacts/detail"));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "timeliner",
|
||||
"homepage": "https://github.com/technotarek/timeliner",
|
||||
"_release": "2b17590fae",
|
||||
"_resolution": {
|
||||
"type": "branch",
|
||||
"branch": "master",
|
||||
"commit": "2b17590fae9d8fb2cc96746962ff14d825f2a122"
|
||||
},
|
||||
"_source": "https://github.com/technotarek/timeliner.git",
|
||||
"_target": "*",
|
||||
"_originalSource": "timeliner",
|
||||
"_direct": true
|
||||
}
|
||||
@ -0,0 +1,407 @@
|
||||
# Timeliner
|
||||
|
||||
## Overview
|
||||
Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it's (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML.
|
||||
|
||||
Please [drop me a line](http://www.technotarek.com/contact "drop me a line") if you do do something interesting with it. See below for samples from other users.
|
||||
|
||||
## Demos and Live Implementations
|
||||
|
||||
###### Advanced CSS3 Customization Demo
|
||||
https://technotarek.com/timeliner/demo-future/timeliner-future.html
|
||||
|
||||
###### Implementation with Custom CSS: Investigating Power
|
||||
https://investigatingpower.org/civil-rights/
|
||||
|
||||
###### Original Demo
|
||||
https://www.technotarek.com/timeliner/timeliner.html
|
||||
|
||||
## Quick Start
|
||||
|
||||
#### Load Plugin and Dependencies
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/timeliner.css" type="text/css" media="screen">
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/timeliner.min.js"></script>
|
||||
```
|
||||
|
||||
#### Instantiate
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$.timeliner({});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
#### Markup
|
||||
Using the plugin's defaults and recommended markup, a timeline with two major time markers (1976 and 1984) and a total of three events looks like this:
|
||||
|
||||
```html
|
||||
<div id="timeline" class="timeline-container">
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time">1976</h2>
|
||||
|
||||
<dl class="timeline-series">
|
||||
|
||||
<dt class="timeline-event" id="event01"><a>Event</a></dt>
|
||||
<dd class="timeline-event-content" id="event01EX">
|
||||
<p>Content about the event goes here.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="timeline-event" id="event02"><a>Another Event</a></dt>
|
||||
<dd class="timeline-event-content" id="event02EX">
|
||||
<p>Content about the other event.</p>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time">1984</h2>
|
||||
|
||||
<dl class="timeline-series">
|
||||
|
||||
<dt class="timeline-event" id="event03"><a>Yet Another Event</a></dt>
|
||||
<dd class="timeline-event-content" id="event03EX">
|
||||
<p>Content about the event goes here.</p>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
<br class="clear">
|
||||
</div>
|
||||
```
|
||||
|
||||
[Emmet](http://emmet.io/) snippet:
|
||||
|
||||
div#timeline.timeline-container>div.timeline-wrapper>h2.timeline-time+dl.timeline-series>dt.timeline-event#my-event-01+dd.timeline-event-content#my-event-01EX
|
||||
|
||||
## Important Upgrade Notes
|
||||
|
||||
Users wishing to upgrade from v1.x to v2.x should note that the default markup for timeliner.js has changed. Specifically, most of the default class names have changed.
|
||||
|
||||
* screen.css was divided into two separate files, demo.css and timeliner.css
|
||||
* "timelineContainer" ==> "timeline-container"
|
||||
* "timelineMajor" ==> "timeline-wrapper"
|
||||
* "timelineMajorMarker" ==> "timeline-time"
|
||||
* "timelineMinor" ==> "timeline-series"
|
||||
* "timelineEvent" ==> "timeline-event-content"
|
||||
|
||||
To resolve these changes, either update your markup and/or use the new customization options introducted with v2.0. For example, you could use the new "timelineSection" option to change the selector from "timeline-wrapper" back to "timelineMajor". Otherwise, simply replace your original timeliner javascript and css files with the 2.x versions.
|
||||
|
||||
In addition, note:
|
||||
|
||||
* Each minor marker tag needs a class of timeline-event
|
||||
* The display:none property from the previous timelineEvent (now timeline-event-content) element is no longer necessary
|
||||
* The expand/collapse element uses new and simplified markup. See the Usage section for details.
|
||||
* The license has been changed from a _Creative Commons Attribution-ShareAlike 3.0 Unported License_ to a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. The former continues to apply to version 1.x implementations.
|
||||
|
||||
The 2.x changes provide an improved semantic markup. They also help other developers use a custom markup structure. Whereas version 1.x required the use of dl, dt, dd tags, it is now possible to use your own markup in coordination with the plugin's options. Other changes were made for the sake of consistency and to simplify future development.
|
||||
|
||||
## Requirements
|
||||
* jQuery
|
||||
* Optional: Jack Moore's ColorBox jQuery plugin
|
||||
|
||||
## Detailed Usage Instructions
|
||||
1. Include timeliner.css (or timeliner.min.css) and timeliner.js (or timeliner.min.js). Optionally, also include responsive.css / responsive.min.css for basic responsive behavior on phones and mobile devices below 480px wide (iPad responsive behavior forthcoming).
|
||||
|
||||
2. Wrap your timeline in an element with an ID of "timeline" and CLASS of timeline-container. You can set your own container ID using the plugin's options. If you need to use a customized class value as well, update the CSS accordingly.
|
||||
|
||||
```html
|
||||
<div id="timeline" class="timeline-container">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
3. Separate the major marker content (e.g., content for each century, year, decade etc) into elements with a class of timeline-wrapper. See the options if you need to customize this class value.
|
||||
|
||||
```html
|
||||
<div class="timeline-wrapper">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
4. Wrap the major markers in an element with a class of 'timeline-year'. See the options if you need to customize this class value.
|
||||
|
||||
```html
|
||||
<h2 class="timeline-time">1954</h2>
|
||||
```
|
||||
|
||||
5. Separate the individual events into DL elements with a class of "timeline-series". See the options if you need to customize this class value.
|
||||
|
||||
```html
|
||||
<dl class="timeline-series">
|
||||
...
|
||||
</dl>
|
||||
```
|
||||
|
||||
6. Wrap the title of the individual events in a DT tag surrounding an A tag; give each DT a unique ID and the class of "timeline-event".
|
||||
|
||||
```html
|
||||
<dt class="timeline-event" id="19540517"><a>Brown vs Board of Education</a></dt>
|
||||
```
|
||||
|
||||
7. Wrap the full event content in a DD tag; give each DD an ID based on the DT with 'EX' appended and a class of 'timeline-event-content'. See the options to customize these values.
|
||||
|
||||
```html
|
||||
<dd class="timeline-event-content" id="19540517EX">
|
||||
...
|
||||
</dd>
|
||||
```
|
||||
|
||||
8. Instantiate:
|
||||
|
||||
```js
|
||||
$.timeliner({});
|
||||
```
|
||||
|
||||
9. Or, instantiate with multiple timelines:
|
||||
|
||||
```js
|
||||
$.timeliner({timelineContainer: '#timeline'});
|
||||
$.timeliner({timelineContainer: '#timeline2'});
|
||||
```
|
||||
|
||||
10. Or, instantiate with options. Use as many or as few as you like. If you're using multiple timelines on a single page, options can be set on each individual timeline.
|
||||
|
||||
```js
|
||||
$.timeliner({
|
||||
timelineContainer: '#timeline',
|
||||
// Container for the element holding the entire timeline (e.g. a DIV)
|
||||
// value: ID or class selector
|
||||
// default: #timeline
|
||||
// note: must be unique for each timeline on page
|
||||
|
||||
timelineSection: '.timeline-wrapper',
|
||||
// Wrapper that contains items under a specific marker (e.g., all of the events under a year on the timeline)
|
||||
// value: class selector
|
||||
// default: .timeline-wrapper
|
||||
// note: changing this selector from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineSectionMarker: '.timeline-time',
|
||||
// Class selector applied to each major item on the timeline, such as each year
|
||||
// value: class selector
|
||||
// default: .timeline-year
|
||||
|
||||
timelineTriggerContainer: '.timeline-series',
|
||||
// Class assigned to wrappers surrounding each individual event
|
||||
// value: selector
|
||||
// default: .timeline-series
|
||||
// note: changing this selector from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineTriggerAnchor: '.timeline-event',
|
||||
// Element that is wrapped around the event's title; when clicked, expands the event and reveals its full contents
|
||||
// value: class selector
|
||||
// default: .timeline-event
|
||||
// note: changing this tag from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineEventContainer: options['timelineEventContainer'] || 'dt',
|
||||
// Wrapper surrounding a series of events corresponding to the timelineSectionMarker
|
||||
// value: tag or class selector
|
||||
// default: dt
|
||||
// note: When leaving this value at its default, you do not need to apply a class to the dt element if you use the plugins recommended tag structure and markup
|
||||
// note: Change this from the default, perhaps to a class like ".timeline-event", in the case that you do not want to use the plugins recommened markup structure and prefer to use anothe element (e.g, div) instead of a dt tag to mark each event within a series.
|
||||
// note: Changing this value from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineEXContent: '.timeline-event-content',
|
||||
// Element that contains the event's full content to be displayed when event is expanded, an event's expanded ID should alway be on this item
|
||||
// value: class selector
|
||||
// default: .timeline-event-ex
|
||||
// note: changing this selector from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
EXContentIdSuffix: 'EX',
|
||||
// ID suffix to identify expanded (aka EX) content
|
||||
// value: string
|
||||
// default: EX
|
||||
|
||||
oneOpen: false,
|
||||
// sets whether only one item on the timeline can be open at a time. If true, other items will close when one is opened.
|
||||
// value: true | false
|
||||
// default: false
|
||||
// note: does not apply to events identified in startOpen option
|
||||
|
||||
startState: options['startState'] || 'closed',
|
||||
// sets whether the timeline is initially collapsed, fully expanded, or "flat" mode
|
||||
// value: closed | open | flat
|
||||
// default: closed
|
||||
// note: setting to "open" makes the startOpen option meaningless
|
||||
// note: flat mode initally collapses the entire timeline except for the major markers
|
||||
// note: the flat state is an initial display option only -- the timeline major markers return to normal once they've been opened/displayed
|
||||
|
||||
startOpen: options['startOpen'] || ['.start-open'],
|
||||
// As of version 2.3, you can simply add the "start-open" class to each timeline-event you want to have open by default; see the demo source code or code sample below
|
||||
// sets the events to display expanded on page load
|
||||
// value: array of IDs of single timelineEvents (e.g., ['#event01'] or ['#event01','#event02'])
|
||||
// default: ['.start-open']
|
||||
|
||||
baseSpeed: 200,
|
||||
// sets the base speed for animation of an event
|
||||
// value: numeric
|
||||
// default: 200
|
||||
|
||||
speed: 4,
|
||||
// multiplier applied to the base speed that sets the speed at which an event's contents are displayed and hidden
|
||||
// value: numeric
|
||||
// default: 4
|
||||
|
||||
fontOpen: '1.2em',
|
||||
// sets the font size of an event after it is opened
|
||||
// value: any valid CSS font-size value,
|
||||
// default: 1.2em
|
||||
|
||||
fontClosed: '1em',
|
||||
// sets the font size of an event after it is closed
|
||||
// value: any valid CSS font-size value
|
||||
// defaults: 1em
|
||||
|
||||
expandAllText: '+ expand all',
|
||||
// sets the text of the expandAll selector after the timeline is fully collapsed
|
||||
// value: string
|
||||
// default: + expand all
|
||||
|
||||
collapseAllText: '- collapse all'
|
||||
//sets the text of the expandAll selector after the timeline is fully expanded
|
||||
// value: string
|
||||
// default: - collapse all
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
11. Add an expand/collapse all events by adding the following inside of the main #timeline. Use the expandAllText and collapseAllText options to customize this button. You may include more than one expand/collapse button per timeline, such as at the top and bottom of your timeline. When the state of one changes, it will update all others.
|
||||
|
||||
```html
|
||||
<button class="timeline-toggle">+ expand all</button>
|
||||
```
|
||||
|
||||
## Sample
|
||||
|
||||
Using the plugins defaults and recommended markup, a timeline with only one time marker and two events would look like this:
|
||||
|
||||
```html
|
||||
<div id="timeline" class="timeline-container">
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time">1976</h2>
|
||||
|
||||
<dl class="timeline-series">
|
||||
|
||||
<dt class="timeline-event" id="event01"><a>Event</a></dt>
|
||||
<dd class="timeline-event-content" id="event01EX">
|
||||
<p>Content about the event goes here.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="timeline-event start-open" id="event02"><a>Another Event</a></dt>
|
||||
<dd class="timeline-event-content" id="event02EX">
|
||||
<p>Content about the other event.</p>
|
||||
</dd>
|
||||
|
||||
</dl>
|
||||
</div>
|
||||
<br class="clear">
|
||||
</div>
|
||||
```
|
||||
|
||||
Using the customization options introduced in v2.0, it's possible to customize the tags and class names used by the plugin. For example, the "timeline-time" class applied to the h2 tag can be customized. Perhaps, if you're using the plugin to outline the steps involved in a task (like putting together a piece of furniture), you could use "timeline-step" instead.
|
||||
|
||||
In fact, it's possible to use a different markup structure entirely by fully using the v2.0 customization options.
|
||||
|
||||
## Additional Examples
|
||||
|
||||
* http://technotarek.com/timeliner/demo-future/timeliner-future.html
|
||||
* http://investigatingpower.org/vietnam/
|
||||
* http://www.ncld-youth.info/index.php?id=61
|
||||
|
||||
## Change Log
|
||||
|
||||
###### v2.3.1 (3/23/2018)
|
||||
* Added minified responsive css file.
|
||||
|
||||
###### v2.3 (5/12/2017)
|
||||
* Confirmed compatibility with jQuery 3.x. See issue #22.
|
||||
|
||||
###### v2.3 (5/9/2016)
|
||||
* Add ability to set .start-open class on events (resolves #17)
|
||||
|
||||
###### v2.2 (10/12/2014)
|
||||
* Added new "flat" startState which allows for a fully collapsed timeline upon load
|
||||
|
||||
###### v2.1 (10/10/2014)
|
||||
* Separated css into two separate files to isolate demo from plugin styles (demo.css and timeliner.css)
|
||||
* Added minified css file (timeliner.min.css)
|
||||
* Support multiple expand/collapse buttons per timeline
|
||||
* Added new demo files for "Future" theme
|
||||
|
||||
###### v2.0 (10/10/2014)
|
||||
* Merged customization efforts developed by https://github.com/ascloutier/timeliner
|
||||
* Merge includes new oneOpen option
|
||||
* Revised plugin's default selector labels to reflect semantic naming in the case of a traditional timeline
|
||||
* Fixed issue where major markers would not re-open after one cycle
|
||||
* Added LESS file for faster CSS revisions and customization
|
||||
|
||||
###### v1.6 (1/7/2013)
|
||||
* Merged multiple-timeline per page enhancement \( supported by https://github.com/luisalima \)
|
||||
|
||||
###### v1.5.1 (10/1/2013)
|
||||
* Changed click events to use jQuery delegated events via the .on\(\) method \( supported partially by code contributed by https://github.com/gkarka \)
|
||||
|
||||
###### v1.5.responsive (7/9/2013)
|
||||
* Added basic responsive behavior for phone/mobile devices below 480px wide \(supported partially by code contributed by Geus Maxime\)
|
||||
|
||||
###### v1.5 (6/7/2013)
|
||||
* startOpen option now accepts multiple timeline events
|
||||
|
||||
###### v1.4.1 (6/7/2013)
|
||||
* Merged in openStart-fix \( via https://github.com/rs017991 \)
|
||||
|
||||
###### v1.4 (4/27/2013)
|
||||
* Fixed jQuery 1.9 Toggle deprecation \( #0d2755 via https://github.com/Marco129 \)
|
||||
* Customization for expand/collpase all \( #927fac via https://github.com/Marco129 \)
|
||||
* Updated ColorBox plugin for jQuery 1.9
|
||||
|
||||
###### v1.3 (1/25/2013)
|
||||
* Major js code simplification and optimization
|
||||
|
||||
###### v1.2 (1/24/2013)
|
||||
* Added in additional instantiation options
|
||||
* Fixed startOpen bug
|
||||
|
||||
###### v1.1 (1/23/2013)
|
||||
* Added startOpen option
|
||||
|
||||
###### v1.0 (5/1/2012)
|
||||
* First release
|
||||
|
||||
## Accessbility
|
||||
|
||||
The original 1.0 version was also fully accessible and 508 compliant as of its original production (mid-2000s). Accessibility technologies have since changed as have coding practices to address accessibility (e.g., the adoption of ARIA). It is recommended that you review your own implementation to ensure accessiblity if that is a requirement of your project. I hope to re-review and update the plugin's native accessiblity at a later date.
|
||||
|
||||
## Roadmap
|
||||
|
||||
* Replace ColorBox plugin with alternative
|
||||
* Improve responsiveness for a variety of device sizes
|
||||
* Add easy theming and new visual options
|
||||
* Revisit accesibility: add in ARIA and keyboard controls
|
||||
|
||||
## Ideas for v3
|
||||
|
||||
http://codepen.io/plasm/pen/oZbXmj
|
||||
|
||||
## Credits
|
||||
The content used in the repo and in the demo is from the Investigating Power project (https://investigatingpower.org), a website which I developed on behalf of author and journalist Charles Lewis.
|
||||
|
||||
Thanks to on-going development and contributions from the community, timeliner continues to improve. Notable enhancements include basic responsiveness for mobile devices, the ability to add multiple timelines to a single page, and customizable selectors to allow for semantic markup.
|
||||
|
||||
The repo is packaged with a version of Jack Moore's ColorBox jQuery plugin (http://www.jacklmoore.com/colorbox). It is for demonstration purposes only. See https://github.com/jackmoore/colorbox for support.
|
||||
|
||||
## License
|
||||
What's most important to me is that you [let me know](http://www.technotarek.com/contact "contact") if you implement it somewhere so I can take a peek. As of version 2.0, I've changed the license to prohibit commerical usage without my consent. The intent is not to limit a single implementation (e.g,. on a company website), but to prohibit the use and packaging of this plugin within other commercial products (e.g, themes, applications etc).
|
||||
|
||||
##### version 2.x+
|
||||
Timeliner.js by Tarek Anandan, version 2.x+, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
|
||||
|
||||
|
||||
|
||||
##### version 1.x
|
||||
Timeliner.js by Tarek Anandan, version 1.x, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
|
||||
@ -0,0 +1,58 @@
|
||||
/* ======= DEMO LAYOUT ======= */
|
||||
body {
|
||||
background-color: #2f2f2f;
|
||||
color: #eeefef;
|
||||
font-size: 62.5%;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
width: 940px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 10px;
|
||||
*zoom: 1;
|
||||
}
|
||||
h1 {
|
||||
color: #7DBADF;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin: 5px 0;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.6em;
|
||||
margin: 10px 0 10px 10px;
|
||||
}
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #7097af;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #7DBADF;
|
||||
}
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px 8px;
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
.lead {
|
||||
font-size: 2em;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
/* ======= DEMO LAYOUT ======= */
|
||||
|
||||
body {
|
||||
background-color:#2f2f2f;
|
||||
color:#eeefef;
|
||||
font-size:62.5%;
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width:940px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
padding:10px;
|
||||
*zoom:1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:#7DBADF;
|
||||
font-size:36px;
|
||||
font-weight:400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:22px;
|
||||
font-weight:400;
|
||||
margin:5px 0;
|
||||
letter-spacing:.1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:1.6em;
|
||||
margin:10px 0 10px 10px;
|
||||
}
|
||||
|
||||
a:link,a:visited {
|
||||
color:#7097af;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#7DBADF;
|
||||
}
|
||||
|
||||
a img {
|
||||
border:none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin:0 0 10px 8px;
|
||||
font-size:1.5em;
|
||||
font-weight:400;
|
||||
line-height:1.6em;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size:2em;
|
||||
margin-bottom:40px;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
line-height:0;
|
||||
font-size:0;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
/* Smartphones (landscape and portrait) ----------- */
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
* {
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
div.timelineToggle {
|
||||
float:none;
|
||||
}
|
||||
|
||||
.timelineEvent div.media {
|
||||
display:none;
|
||||
float:none;
|
||||
}
|
||||
|
||||
.timelineMinor dt {
|
||||
font-size:1.2em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.timelineMinor dd h3 {
|
||||
font-size:1em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
div#timelineContainer {
|
||||
}
|
||||
|
||||
.timelineMinor dd {
|
||||
margin-left:20px;
|
||||
padding-left:0;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.timelineEvent .media p {
|
||||
font-size:1em;
|
||||
}
|
||||
|
||||
dl.timelineMinor {
|
||||
float:none;
|
||||
max-width:80%;
|
||||
}
|
||||
|
||||
.timelineEvent p {
|
||||
float:none;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.timelineEvent blockquote {
|
||||
float:none;
|
||||
width:200px;
|
||||
font-size:1em;
|
||||
}
|
||||
}
|
||||
/* Smartphones (portrait) ----------- */
|
||||
@media only screen and (max-width : 320px) {
|
||||
|
||||
* {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
}
|
||||
1
contact-center/app/src/main/resources/static/js/timeliner/css/responsive.min.css
vendored
Normal file
1
contact-center/app/src/main/resources/static/js/timeliner/css/responsive.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
@media screen and (max-width:768px){*{max-width:460px}body{font-size:large}.container{padding:10px}div.timelineToggle{float:none}.timelineEvent div.media{display:none;float:none}.timelineMinor dt{font-size:1.2em;white-space:normal}.timelineMinor dd h3{font-size:1em;white-space:normal}.timelineMinor dd{margin-left:20px;padding-left:0;width:100%}.timelineEvent .media p{font-size:1em}dl.timelineMinor{float:none;max-width:80%}.timelineEvent p{float:none;width:100%}.timelineEvent blockquote{float:none;width:200px;font-size:1em}}@media only screen and (max-width :320px){*{max-width:300px}}
|
||||
@ -0,0 +1,145 @@
|
||||
/* ============ TIMELINER.JS ============= */
|
||||
.timeline-container {
|
||||
border-left: 2px solid #ccc;
|
||||
margin: 20px auto;
|
||||
width: 900px;
|
||||
}
|
||||
.timeline-toggle {
|
||||
background: #000;
|
||||
border-color: #161616;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
margin-right: 0;
|
||||
padding: 3px 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timeline-wrapper {
|
||||
clear: left;
|
||||
float: left;
|
||||
margin: 0 0 12px;
|
||||
width: 900px;
|
||||
}
|
||||
.timeline-wrapper h2 {
|
||||
background: url(../images/timeline_century_tick.gif) left center no-repeat;
|
||||
font-family: Palatino, "Times New Roman", Times, serif;
|
||||
cursor: pointer;
|
||||
font-size: 3em;
|
||||
font-weight: 400;
|
||||
margin: 0 0 10px;
|
||||
padding: 4px 4px 4px 20px;
|
||||
}
|
||||
.timeline-wrapper h2 span {
|
||||
background: #ccc;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
color: #131313;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1.7em;
|
||||
padding: 3px 5px 1px;
|
||||
}
|
||||
.timeline-series {
|
||||
clear: left;
|
||||
float: left;
|
||||
margin: 0 12px 0 0;
|
||||
padding: 4px 4px 4px 0;
|
||||
position: relative;
|
||||
width: 880px;
|
||||
}
|
||||
.timeline-series dt {
|
||||
background: url(../images/timeline_decade_tick.gif) left center no-repeat;
|
||||
clear: left;
|
||||
font-size: 1.6em;
|
||||
list-style-type: none;
|
||||
line-height: 1.2em;
|
||||
margin: 0 0 12px;
|
||||
padding: 0 0 0 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timeline-series dt a {
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.timeline-series dt a .closed {
|
||||
color: #999;
|
||||
font-size: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.timeline-series dt a .open {
|
||||
color: #7DBADF;
|
||||
}
|
||||
.timeline-series dt a:hover {
|
||||
color: #7DBADF;
|
||||
}
|
||||
.timeline-series dd {
|
||||
padding-left: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
.timeline-series dd h3 {
|
||||
color: #FFF;
|
||||
clear: both;
|
||||
float: left;
|
||||
font-size: 1.5em;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timeline-event-content {
|
||||
display: none;
|
||||
}
|
||||
.timeline-event-content p {
|
||||
clear: left;
|
||||
float: left;
|
||||
line-height: 1.5em;
|
||||
margin: 6px 0 10px;
|
||||
width: 500px;
|
||||
}
|
||||
.timeline-event-content h4 {
|
||||
clear: left;
|
||||
float: left;
|
||||
font-size: 1.4em;
|
||||
font-weight: 400;
|
||||
margin: 10px 0 0;
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
.timeline-event-content blockquote {
|
||||
border-left: 2px solid #ccc;
|
||||
clear: left;
|
||||
float: left;
|
||||
font-size: 1.8em;
|
||||
margin-left: 0;
|
||||
padding: 0 30px;
|
||||
width: 400px;
|
||||
}
|
||||
.timeline-event-content blockquote .attribution {
|
||||
font-size: 0.7em;
|
||||
text-align: right;
|
||||
}
|
||||
.timeline-event-content .media {
|
||||
float: right;
|
||||
padding: 0 0 12px;
|
||||
width: 300px;
|
||||
}
|
||||
.timeline-event-content .media img {
|
||||
border: 2px solid #000;
|
||||
margin: 0;
|
||||
}
|
||||
.timeline-event-content .media p {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.timeline-event-content .media a:link,
|
||||
.timeline-event-content .media a:visited {
|
||||
color: #ab221b;
|
||||
}
|
||||
.timeline-event-content .media a:hover {
|
||||
color: #7DBADF;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
@ -0,0 +1,151 @@
|
||||
/* ============ TIMELINER.JS ============= */
|
||||
|
||||
.timeline-container {
|
||||
border-left:2px solid #ccc;
|
||||
margin:20px auto;
|
||||
width:900px;
|
||||
}
|
||||
|
||||
.timeline-toggle {
|
||||
background:#000;
|
||||
border-color:#161616;
|
||||
-webkit-border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
border-radius:4px;
|
||||
color:#ccc;
|
||||
cursor:pointer;
|
||||
float:right;
|
||||
font-size:12px;
|
||||
margin-right:0;
|
||||
padding:3px 5px;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
.timeline-wrapper {
|
||||
clear:left;
|
||||
float:left;
|
||||
margin:0 0 12px;
|
||||
width:900px;
|
||||
h2 {
|
||||
background:url(../images/timeline_century_tick.gif) left center no-repeat;
|
||||
font-family:Palatino,"Times New Roman", Times, serif;
|
||||
cursor: pointer;
|
||||
font-size:3em;
|
||||
font-weight:400;
|
||||
margin:0 0 10px;
|
||||
padding:4px 4px 4px 20px;
|
||||
span {
|
||||
background:#ccc;
|
||||
-webkit-border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
border-radius:4px;
|
||||
color:#131313;
|
||||
letter-spacing:0.1em;
|
||||
line-height:1.7em;
|
||||
padding:3px 5px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-series {
|
||||
clear:left;
|
||||
float:left;
|
||||
margin:0 12px 0 0;
|
||||
padding:4px 4px 4px 0;
|
||||
position:relative;
|
||||
width:880px;
|
||||
dt {
|
||||
background:url(../images/timeline_decade_tick.gif) left center no-repeat;
|
||||
clear:left;
|
||||
font-size:1.6em;
|
||||
list-style-type:none;
|
||||
line-height:1.2em;
|
||||
margin:0 0 12px;
|
||||
padding:0 0 0 24px;
|
||||
white-space:nowrap;
|
||||
a {
|
||||
color:#999;
|
||||
cursor:pointer;
|
||||
.closed {
|
||||
color:#999;
|
||||
font-size:1em;
|
||||
margin-left:0;
|
||||
}
|
||||
.open {
|
||||
color:#7DBADF;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
color:#7DBADF;
|
||||
}
|
||||
}
|
||||
dd {
|
||||
padding-left:24px;
|
||||
width:100%;
|
||||
h3 {
|
||||
color:#FFF;
|
||||
clear:both;
|
||||
float:left;
|
||||
font-size:1.5em;
|
||||
margin:0;
|
||||
white-space:nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-event-content {
|
||||
display:none;
|
||||
p {
|
||||
clear:left;
|
||||
float:left;
|
||||
line-height:1.5em;
|
||||
margin:6px 0 10px;
|
||||
width:500px;
|
||||
}
|
||||
h4 {
|
||||
clear:left;
|
||||
float:left;
|
||||
font-size:1.4em;
|
||||
font-weight:400;
|
||||
margin:10px 0 0;
|
||||
padding:0 0 0 20px;
|
||||
}
|
||||
blockquote {
|
||||
border-left:2px solid #ccc;
|
||||
clear:left;
|
||||
float:left;
|
||||
font-size:1.8em;
|
||||
margin-left:0;
|
||||
padding:0 30px;
|
||||
width:400px;
|
||||
.attribution {
|
||||
font-size:0.7em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.media {
|
||||
float:right;
|
||||
padding:0 0 12px;
|
||||
width:300px;
|
||||
img {
|
||||
border:2px solid #000;
|
||||
margin:0;
|
||||
}
|
||||
p {
|
||||
font-size:1.2em;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
a:link, a:visited {
|
||||
color:#ab221b;
|
||||
}
|
||||
a:hover {
|
||||
color:#7DBADF;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
1
contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.min.css
vendored
Normal file
1
contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.timeline-container{border-left:2px solid #ccc;margin:20px auto;width:900px}.timeline-toggle{background:#000;border-color:#161616;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#ccc;cursor:pointer;float:right;font-size:12px;margin-right:0;padding:3px 5px;white-space:nowrap}.timeline-wrapper{clear:left;float:left;margin:0 0 12px;width:900px}.timeline-wrapper h2{background:url(../images/timeline_century_tick.gif) left center no-repeat;font-family:Palatino,"Times New Roman",Times,serif;cursor:pointer;font-size:3em;font-weight:400;margin:0 0 10px;padding:4px 4px 4px 20px}.timeline-wrapper h2 span{background:#ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#131313;letter-spacing:.1em;line-height:1.7em;padding:3px 5px 1px}.timeline-series{clear:left;float:left;margin:0 12px 0 0;padding:4px 4px 4px 0;position:relative;width:880px}.timeline-series dt{background:url(../images/timeline_decade_tick.gif) left center no-repeat;clear:left;font-size:1.6em;list-style-type:none;line-height:1.2em;margin:0 0 12px;padding:0 0 0 24px;white-space:nowrap}.timeline-series dt a{color:#999;cursor:pointer}.timeline-series dt a .closed{color:#999;font-size:1em;margin-left:0}.timeline-series dt a .open,.timeline-series dt a:hover{color:#7DBADF}.timeline-series dd{padding-left:24px;width:100%}.timeline-series dd h3{color:#FFF;clear:both;float:left;font-size:1.5em;margin:0;white-space:nowrap}.timeline-event-content{display:none}.timeline-event-content p{clear:left;float:left;line-height:1.5em;margin:6px 0 10px;width:500px}.timeline-event-content h4{clear:left;float:left;font-size:1.4em;font-weight:400;margin:10px 0 0;padding:0 0 0 20px}.timeline-event-content blockquote{border-left:2px solid #ccc;clear:left;float:left;font-size:1.8em;margin-left:0;padding:0 30px;width:400px}.timeline-event-content blockquote .attribution{font-size:.7em;text-align:right}.timeline-event-content .media{float:right;padding:0 0 12px;width:300px}.timeline-event-content .media img{border:2px solid #000;margin:0}.timeline-event-content .media p{font-size:1.2em;margin:0;padding:0}.timeline-event-content .media a:link,.timeline-event-content .media a:visited{color:#ab221b}.timeline-event-content .media a:hover{color:#7DBADF}.clear{clear:both}
|
||||
@ -0,0 +1,321 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700);
|
||||
/* ======= DEMO LAYOUT ======= */
|
||||
body {
|
||||
background-color: #2f2f2f;
|
||||
color: #eeefef;
|
||||
font-size: 62.5%;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
width: 940px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 10px;
|
||||
*zoom: 1;
|
||||
}
|
||||
h1 {
|
||||
color: #7DBADF;
|
||||
font-size: 36px;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin: 5px 0;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.6em;
|
||||
margin: 10px 0 10px 10px;
|
||||
}
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #7097af;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #7DBADF;
|
||||
}
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px 8px;
|
||||
font-size: 1.5em;
|
||||
font-weight: 400;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
.lead {
|
||||
font-size: 2em;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
body {
|
||||
background: #090a0f url("../img/bg-space-mod.jpg") no-repeat bottom right fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-family: "Josefin Sans", arial, sans serif;
|
||||
font-size: 68.5%;
|
||||
padding: 40px 0;
|
||||
}
|
||||
h1 {
|
||||
color: #78a8b2;
|
||||
font-size: 4.8em;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h2 {
|
||||
font-size: 3.6em;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.step1 {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.step2 {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.step3 {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.lead {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
a:hover,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #78a8b2;
|
||||
}
|
||||
.timeline-container {
|
||||
border-left: 4px solid rgba(0, 69, 121, 0.65);
|
||||
margin: 20px auto;
|
||||
width: 900px;
|
||||
}
|
||||
.timeline-container-tick {
|
||||
background: rgba(0, 69, 121, 0.65);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 4px;
|
||||
left: -8px;
|
||||
width: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.timeline-container::before {
|
||||
background: rgba(0, 69, 121, 0.65);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 4px;
|
||||
left: -8px;
|
||||
width: 14px;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
.timeline-container::after {
|
||||
background: rgba(0, 69, 121, 0.65);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 4px;
|
||||
left: -8px;
|
||||
width: 14px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
.timeline-toggle {
|
||||
background: rgba(23, 66, 98, 0.65);
|
||||
border: 0;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
margin-right: 0;
|
||||
padding: 10px 15px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timeline-toggle:hover {
|
||||
background: rgba(119, 0, 63, 0.8);
|
||||
-webkit-transition: background 0.2s ease-in;
|
||||
-moz-transition: background 0.2s ease-in;
|
||||
-o-transition: background 0.2s ease-in;
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
.timeline-toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
.timeline-wrapper {
|
||||
clear: left;
|
||||
float: left;
|
||||
margin: 0 0 12px;
|
||||
width: 900px;
|
||||
}
|
||||
.timeline-wrapper .timeline-time::before {
|
||||
border-top: 4px solid rgba(0, 69, 121, 0.65);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 4px;
|
||||
margin-right: 0px;
|
||||
vertical-align: middle;
|
||||
width: 24px;
|
||||
}
|
||||
.timeline-wrapper .timeline-time {
|
||||
cursor: pointer;
|
||||
font-size: 2.8em;
|
||||
font-weight: 400;
|
||||
margin: 0 0 30px 0;
|
||||
padding: 0;
|
||||
}
|
||||
.timeline-wrapper .timeline-time span {
|
||||
background: rgba(0, 69, 121, 0.65);
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
display: inline-block;
|
||||
letter-spacing: 0;
|
||||
padding: 10px 10px 5px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.timeline-wrapper .timeline-time span:hover {
|
||||
background: rgba(0, 69, 121, 0.95);
|
||||
-webkit-transition: background 0.2s ease-in;
|
||||
-moz-transition: background 0.2s ease-in;
|
||||
-o-transition: background 0.2s ease-in;
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
.timeline-series {
|
||||
clear: left;
|
||||
float: left;
|
||||
margin: 0 12px 0 0;
|
||||
padding: 4px 4px 4px 0;
|
||||
position: relative;
|
||||
width: 880px;
|
||||
}
|
||||
.timeline-series dt::before {
|
||||
border-top: 3px solid rgba(0, 69, 121, 0.65);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 3px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
width: 10px;
|
||||
}
|
||||
.timeline-series dt {
|
||||
clear: left;
|
||||
font-size: 2em;
|
||||
line-height: 1.2em;
|
||||
margin: 0 0 12px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timeline-series dt a {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
cursor: pointer;
|
||||
}
|
||||
.timeline-series dt a .closed {
|
||||
color: #999;
|
||||
font-size: 1em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.timeline-series dt a .open {
|
||||
color: #7DBADF;
|
||||
}
|
||||
.timeline-series dt a:hover {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
-webkit-transition: color 0.2s ease-in;
|
||||
-moz-transition: color 0.2s ease-in;
|
||||
-o-transition: color 0.2s ease-in;
|
||||
transition: color 0.2s ease-in;
|
||||
}
|
||||
.timeline-series dd {
|
||||
padding-left: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
.timeline-series dd h3 {
|
||||
color: #FFF;
|
||||
clear: both;
|
||||
float: left;
|
||||
font-size: 1.5em;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tick {
|
||||
background: rgba(0, 69, 121, 0.65);
|
||||
clear: both;
|
||||
display: block;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.tick-before {
|
||||
top: -6px;
|
||||
}
|
||||
.tick-after {
|
||||
top: -4px;
|
||||
}
|
||||
.timeline-event-content {
|
||||
display: none;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.timeline-event-content p {
|
||||
clear: left;
|
||||
float: left;
|
||||
font-size: 2em;
|
||||
font-weight: 100;
|
||||
line-height: 1.2em;
|
||||
margin: 6px 0 10px;
|
||||
width: 500px;
|
||||
}
|
||||
.timeline-event-content h4 {
|
||||
clear: left;
|
||||
float: left;
|
||||
font-size: 1.4em;
|
||||
font-weight: 400;
|
||||
margin: 10px 0 0;
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
.timeline-event-content blockquote {
|
||||
border-left: 2px solid #174262;
|
||||
clear: left;
|
||||
float: left;
|
||||
line-height: 1.2em;
|
||||
margin-left: 0;
|
||||
padding: 0 30px;
|
||||
width: 400px;
|
||||
}
|
||||
.timeline-event-content blockquote .attribution {
|
||||
font-size: 0.7em;
|
||||
text-align: right;
|
||||
}
|
||||
.timeline-event-content .media {
|
||||
float: right;
|
||||
padding: 0 0 12px;
|
||||
width: 300px;
|
||||
}
|
||||
.timeline-event-content .media img {
|
||||
border: 2px solid rgba(255, 255, 255, 0.85);
|
||||
border-radius: 100px;
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
}
|
||||
.timeline-event-content .media p {
|
||||
clear: both;
|
||||
font-size: 1.4em;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.timeline-event-content .media p a {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
@ -0,0 +1,278 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700);
|
||||
@import "/css/demo.less";
|
||||
|
||||
@color-body: #090A0F;
|
||||
@color-time:saturate(fade(@color-accent,65%),50%);
|
||||
@color-ink: fade(#FFF,85%);
|
||||
@color-accent: #174262;
|
||||
@color-accent-2: #78A8B2;
|
||||
@color-contrast: #FF2A9C;
|
||||
@font: "Josefin Sans",arial,sans serif;
|
||||
@background-img: "../img/bg-space-mod.jpg";
|
||||
|
||||
body {
|
||||
background: @color-body url(@background-img) no-repeat bottom right fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
color: @color-ink;
|
||||
font-family:@font;
|
||||
font-size:68.5%;
|
||||
padding:40px 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:@color-accent-2;
|
||||
font-size:4.8em;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:3.6em;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.step1 { color:fade(@color-ink,20%); }
|
||||
.step2 { color:fade(@color-ink,40%); }
|
||||
.step3 { color:fade(@color-ink,60%); }
|
||||
|
||||
.lead {
|
||||
.step3;
|
||||
}
|
||||
|
||||
a:hover,a:link,a:visited {
|
||||
color:@color-accent-2;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
border-left:4px solid @color-time;
|
||||
margin:20px auto;
|
||||
width:900px;
|
||||
}
|
||||
|
||||
.timeline-container-tick {
|
||||
background: @color-time;
|
||||
content:"";
|
||||
display:block;
|
||||
height:4px;
|
||||
left:-8px;
|
||||
width:14px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.timeline-container::before {
|
||||
.timeline-container-tick;
|
||||
top:-4px;
|
||||
}
|
||||
.timeline-container::after {
|
||||
.timeline-container-tick;
|
||||
top:4px;
|
||||
}
|
||||
|
||||
.timeline-toggle {
|
||||
background:fade(@color-accent,65%);
|
||||
border:0;
|
||||
-webkit-border-radius:4px;
|
||||
-moz-border-radius:4px;
|
||||
border-radius:4px;
|
||||
color:@color-ink;
|
||||
cursor:pointer;
|
||||
float:right;
|
||||
font-size:12px;
|
||||
margin-right:0;
|
||||
padding:10px 15px;
|
||||
text-transform: uppercase;
|
||||
white-space:nowrap;
|
||||
}
|
||||
.timeline-toggle:hover {
|
||||
background: fade(darken(@color-contrast,35%),80%);
|
||||
-webkit-transition:background 0.2s ease-in;
|
||||
-moz-transition:background 0.2s ease-in;
|
||||
-o-transition:background 0.2s ease-in;
|
||||
transition:background 0.2s ease-in;
|
||||
}
|
||||
.timeline-toggle:focus {
|
||||
outline:none;
|
||||
}
|
||||
|
||||
|
||||
.timeline-wrapper {
|
||||
clear:left;
|
||||
float:left;
|
||||
margin:0 0 12px;
|
||||
width:900px;
|
||||
.timeline-time::before {
|
||||
border-top:4px solid @color-time;
|
||||
content: "";
|
||||
display:inline-block;
|
||||
height:4px;
|
||||
margin-right:0px;
|
||||
vertical-align: middle;
|
||||
width:24px;
|
||||
}
|
||||
.timeline-time {
|
||||
cursor: pointer;
|
||||
font-size:2.8em;
|
||||
font-weight:400;
|
||||
margin:0 0 30px 0;
|
||||
padding:0;
|
||||
span {
|
||||
background: @color-time;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
color:@color-ink;
|
||||
display: inline-block;
|
||||
letter-spacing:0;
|
||||
padding:10px 10px 5px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
span:hover {
|
||||
background: fade(@color-time,95%);
|
||||
-webkit-transition:background 0.2s ease-in;
|
||||
-moz-transition:background 0.2s ease-in;
|
||||
-o-transition:background 0.2s ease-in;
|
||||
transition:background 0.2s ease-in;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.timeline-series {
|
||||
clear:left;
|
||||
float:left;
|
||||
margin:0 12px 0 0;
|
||||
padding:4px 4px 4px 0;
|
||||
position:relative;
|
||||
width:880px;
|
||||
dt::before {
|
||||
border-top:3px solid @color-time;
|
||||
content: "";
|
||||
display:inline-block;
|
||||
height:3px;
|
||||
margin-right:10px;
|
||||
vertical-align: middle;
|
||||
width:10px;
|
||||
}
|
||||
dt {
|
||||
clear:left;
|
||||
font-size:2em;
|
||||
line-height:1.2em;
|
||||
margin:0 0 12px;
|
||||
text-transform: uppercase;
|
||||
white-space:nowrap;
|
||||
a {
|
||||
.step2;
|
||||
cursor:pointer;
|
||||
.closed {
|
||||
color:#999;
|
||||
font-size:1em;
|
||||
margin-left:0;
|
||||
}
|
||||
.open {
|
||||
color:#7DBADF;
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
.step3;
|
||||
-webkit-transition:color 0.2s ease-in;
|
||||
-moz-transition:color 0.2s ease-in;
|
||||
-o-transition:color 0.2s ease-in;
|
||||
transition:color 0.2s ease-in;
|
||||
}
|
||||
}
|
||||
dd {
|
||||
padding-left:24px;
|
||||
width:100%;
|
||||
h3 {
|
||||
color:#FFF;
|
||||
clear:both;
|
||||
float:left;
|
||||
font-size:1.5em;
|
||||
margin:0;
|
||||
white-space:nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tick {
|
||||
background:@color-time;
|
||||
clear:both;
|
||||
display:block;
|
||||
height:2px;
|
||||
left:0;
|
||||
width:4px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.tick-before {
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
.tick-after {
|
||||
top:-4px;
|
||||
}
|
||||
|
||||
|
||||
.timeline-event-content {
|
||||
display:none;
|
||||
margin-bottom:40px;
|
||||
p {
|
||||
clear:left;
|
||||
float:left;
|
||||
font-size:2em;
|
||||
font-weight: 100;
|
||||
line-height:1.2em;
|
||||
margin:6px 0 10px;
|
||||
width:500px;
|
||||
}
|
||||
h4 {
|
||||
clear:left;
|
||||
float:left;
|
||||
font-size:1.4em;
|
||||
font-weight:400;
|
||||
margin:10px 0 0;
|
||||
padding:0 0 0 20px;
|
||||
}
|
||||
blockquote {
|
||||
border-left:2px solid @color-accent;
|
||||
clear:left;
|
||||
float:left;
|
||||
line-height: 1.2em;
|
||||
margin-left:0;
|
||||
padding:0 30px;
|
||||
width:400px;
|
||||
.attribution {
|
||||
font-size:0.7em;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.media {
|
||||
float:right;
|
||||
padding:0 0 12px;
|
||||
width:300px;
|
||||
img {
|
||||
border:2px solid @color-ink;
|
||||
border-radius:100px;
|
||||
height:200px;
|
||||
margin:0;
|
||||
width:200px;
|
||||
}
|
||||
p {
|
||||
clear:both;
|
||||
font-size:1.4em;
|
||||
margin:15px 0;
|
||||
a {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
}
|
||||
a:link, a:visited {
|
||||
}
|
||||
a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 469 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Timeliner.js Demo</title>
|
||||
<link rel="canonical" href="https://technotarek.com/timeliner/demo-future/timeliner-future.html" />
|
||||
<link rel="stylesheet" href="css/timeliner-future.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="../js/vendor/venobox/venobox.css" type="text/css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Timeliner.js</h1>
|
||||
<h2><span class="step1">Into</span> <span class="step2">The</span> <span class="step3">Future</span></h2>
|
||||
|
||||
<p class="lead">Example of the timeliner.js jquery plugin with advanced, custom theming. All theming accomplished with CSS and minor modifications to the HTML markup. No modifications to the plugin's core javascript. Note that this demonstration does not fully support older browsers (e.g, before Internet Explorer 9) due to the use of CSS3 properties. Also view the <a href="../timeliner.html">original demo</a>.</p>
|
||||
|
||||
<div id="timeline" class="timeline-container">
|
||||
|
||||
<button class="timeline-toggle">+ expand all</button>
|
||||
|
||||
<br class="clear">
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>2000</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<span class="tick tick-before"></span>
|
||||
<dt id="robots" class="timeline-event"><a>Robots</a></dt>
|
||||
<span class="tick tick-after"></span>
|
||||
<dd class="timeline-event-content" id="robotsEX">
|
||||
<div class="media">
|
||||
<a href="https://player.vimeo.com/video/626679" class="venobox" data-type="vimeo" data-overlay="rgba(0,0,0,0.5)"><img src="img/event-robots.jpg" alt="singing robots"></a>
|
||||
<p><a href="https://player.vimeo.com/video/626679" class="venobox" data-type="vimeo" data-overlay="rgba(0,0,0,0.5)">Listen</a></p>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<blockquote>
|
||||
<p>The world is very different ever since the robotic uprising of the mid-nineties. There is no more unhappiness.</p>
|
||||
<p>Affirmative.</p>
|
||||
<p>We no longer say yes, instead we say affirmative.</p>
|
||||
<p>Yes, affirmative.</p>
|
||||
<p>Unless its a more colloquial situation with a few robo friends.</p>
|
||||
<p>There is only one type of dance, the robot.</p>
|
||||
<p>And the robo-boogie.</p>
|
||||
<p>Oh yes, two kinds of dances.</p>
|
||||
</blockquote>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
|
||||
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>2062</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<span class="tick tick-before"></span>
|
||||
<dt id="cars" class="timeline-event"><a>Flying Cars</a></dt>
|
||||
<span class="tick tick-after"></span>
|
||||
<dd class="timeline-event-content" id="carsEX">
|
||||
<div class="media">
|
||||
<a href="//youtu.be/FyinD6ZDqeg" class="venobox" data-type="youtube" data-overlay="rgba(0,0,0,0.5)"><img src="img/event-cars.jpg" alt="flying car"></a>
|
||||
<p><a href="//youtu.be/FyinD6ZDqeg" class="venobox" data-type="youtube" data-overlay="rgba(0,0,0,0.5)">See it in Action</a></p>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>A flying car is hypothetical personal aircraft that provides door-to-door aerial transportation (e.g., from home to work or to the supermarket) as conveniently as a car but without the requirement for roads, runways or other specially-prepared operating areas.</p>
|
||||
<p>The flying car has been depicted in works of fantasy and science fiction such as The Jetsons, Star Wars, Blade Runner, Back to the Future Part II and The Fifth Element. The Jetsons took place in 2062.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
|
||||
<span class="tick tick-before"></span>
|
||||
<dt id="urbanity" class="timeline-event"><a>Aged Urbanity</a></dt>
|
||||
<span class="tick tick-after"></span>
|
||||
<dd class="timeline-event-content" id="urbanityEX">
|
||||
<div class="media">
|
||||
<a href="http://discovermagazine.com/2012/oct/2062-the-state-of-the-world" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)"><img src="img/event-urbanity.jpg" alt="jam packed city fuels tempers"></a>
|
||||
<p><a href="http://discovermagazine.com/2012/oct/2062-the-state-of-the-world" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)">read the predictions</a></p>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>From <i>Discover</i> magazine's "<a href="http://discovermagazine.com/2012/oct/2062-the-state-of-the-world" class="venobox" data-type="iframe">The State of the World: 2062</a>":</p>
|
||||
|
||||
<blockquote>
|
||||
<p>6 billion people live in cities—the population of the entire world at the turn of the century.</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>Earth now home to 2 billion people age 60 and over.</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>Coastal cities go under. Renewable energy rules the day. Cows use up precious water and drive the ongoing greenhouse effect.</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>Incomes skyrocket in developing nations.</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
Ice caps melt. Industry booms at top of the world.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
|
||||
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>2265</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<span class="tick tick-before"></span>
|
||||
<dt id="teleport" class="timeline-event"><a>Teleportation</a></dt>
|
||||
<span class="tick tick-after"></span>
|
||||
<dd class="timeline-event-content" id="teleportEX">
|
||||
|
||||
<div class="media">
|
||||
<a href="//www.teliportme.com/view/446746" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)"><img src="img/event-teleportation.jpg" alt="teleporting humans"></a>
|
||||
<p><a href="//www.teliportme.com/view/446746" class="venobox" data-type="iframe" data-overlay="rgba(0,0,0,0.5)">Try It Now</a></p>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>Teleportation, or Teletransportation, is the theoretical transfer of matter or energy from one point to another without traversing the physical space between them. It is a common subject of science fiction literature, film, and television.</p>
|
||||
|
||||
<p>The original Star Trek series is <a href="http://scifi.stackexchange.com/questions/12784/what-year-is-star-trek-the-original-series-set-in" target="_blank">reported</a> to have taken place from 2265 to 2271.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>2888</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<span class="tick tick-before"></span>
|
||||
<dt id="singularity" class="timeline-event"><a>Singularity</a></dt>
|
||||
<span class="tick tick-after"></span>
|
||||
<dd class="timeline-event-content" id="singularityEX">
|
||||
|
||||
<div class="media">
|
||||
<!-- <a href="img/event-singularity-woah.gif"></a> -->
|
||||
<img src="img/event-singularity.gif" alt="">
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>The technological singularity hypothesis is that accelerating progress in technologies will cause a runaway effect wherein artificial intelligence will exceed human intellectual capacity and control, thus radically changing or even ending civilization in an event called the singularity.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<button class="timeline-toggle">+ expand all</button>
|
||||
|
||||
<br class="clear">
|
||||
|
||||
</div><!-- /#timeline -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
|
||||
<!-- GLOBAL CORE SCRIPTS -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../js/vendor/venobox/venobox.min.js"></script>
|
||||
<script type="text/javascript" src="../js/timeliner.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$.timeliner({
|
||||
timelineContainer:'#timeline',
|
||||
});
|
||||
$('.venobox').venobox();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 54 B |
Binary file not shown.
|
After Width: | Height: | Size: 47 B |
69
contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.css
Executable file
69
contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.css
Executable file
@ -0,0 +1,69 @@
|
||||
/*
|
||||
Colorbox Core Style:
|
||||
The following CSS is consistent between example themes and should not be altered.
|
||||
*/
|
||||
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
|
||||
#cboxOverlay{position:fixed; width:100%; height:100%;}
|
||||
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
|
||||
#cboxContent{position:relative;}
|
||||
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
|
||||
#cboxTitle{margin:0;}
|
||||
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
|
||||
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
|
||||
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
|
||||
.cboxIframe{width:100%; height:100%; display:block; border:0;}
|
||||
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
|
||||
|
||||
/*
|
||||
User Style:
|
||||
Change the following styles to modify the appearance of Colorbox. They are
|
||||
ordered & tabbed in a way that represents the nesting of the generated HTML.
|
||||
*/
|
||||
#cboxOverlay{background:url(images/overlay.png) repeat 0 0;}
|
||||
#colorbox{outline:0;}
|
||||
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
|
||||
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
|
||||
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
|
||||
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
|
||||
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
|
||||
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
|
||||
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
|
||||
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
|
||||
#cboxContent{background:#fff; overflow:hidden;}
|
||||
.cboxIframe{background:#fff;}
|
||||
#cboxError{padding:50px; border:1px solid #ccc;}
|
||||
#cboxLoadedContent{margin-bottom:28px;}
|
||||
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
|
||||
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
|
||||
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
|
||||
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
|
||||
|
||||
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
|
||||
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
|
||||
|
||||
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
|
||||
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
|
||||
|
||||
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
|
||||
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
|
||||
#cboxPrevious:hover{background-position:-75px -25px;}
|
||||
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
|
||||
#cboxNext:hover{background-position:-50px -25px;}
|
||||
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
|
||||
#cboxClose:hover{background-position:-25px -25px;}
|
||||
|
||||
/*
|
||||
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
|
||||
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
|
||||
See: http://jacklmoore.com/notes/ie-transparency-problems/
|
||||
*/
|
||||
.cboxIE #cboxTopLeft,
|
||||
.cboxIE #cboxTopCenter,
|
||||
.cboxIE #cboxTopRight,
|
||||
.cboxIE #cboxBottomLeft,
|
||||
.cboxIE #cboxBottomCenter,
|
||||
.cboxIE #cboxBottomRight,
|
||||
.cboxIE #cboxMiddleLeft,
|
||||
.cboxIE #cboxMiddleRight {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
BIN
contact-center/app/src/main/resources/static/js/timeliner/inc/images/border.png
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/inc/images/border.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 112 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/inc/images/loading.gif
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/inc/images/loading.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 B |
BIN
contact-center/app/src/main/resources/static/js/timeliner/inc/images/overlay.png
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/inc/images/overlay.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 182 B |
4
contact-center/app/src/main/resources/static/js/timeliner/js/jquery.min.js
vendored
Normal file
4
contact-center/app/src/main/resources/static/js/timeliner/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,261 @@
|
||||
/*
|
||||
* Timeliner.js
|
||||
* @version 2.31
|
||||
* @copyright Tarek Anandan (http://www.technotarek.com)
|
||||
*/
|
||||
;(function($) {
|
||||
|
||||
$.timeliner = function(options) {
|
||||
if ($.timeliners == null) {
|
||||
$.timeliners = { options: [] };
|
||||
$.timeliners.options.push(options);
|
||||
}
|
||||
else {
|
||||
$.timeliners.options.push(options);
|
||||
}
|
||||
$(document).ready(function() {
|
||||
for (var i=0; i<$.timeliners.options.length; i++) {
|
||||
startTimeliner($.timeliners.options[i]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function startTimeliner(options) {
|
||||
var settings = {
|
||||
timelineContainer: options['timelineContainer'] || '#timeline',
|
||||
// Container for the element holding the entire timeline (e.g. a DIV)
|
||||
// value: ID or class selector
|
||||
// default: #timeline
|
||||
// note: must be unique for each timeline on page
|
||||
|
||||
timelineSection: options['timelineSection'] || '.timeline-wrapper',
|
||||
// Wrapper that surrounds a time and series of events (e.g., all of the events under a year on the timeline)
|
||||
// value: class selector
|
||||
// default: .timeline-wrapper
|
||||
// note: changing this selector from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineSectionMarker: options['timelineSectionMarker'] || '.timeline-time',
|
||||
// Class selector applied to each major item on the timeline, such as each year
|
||||
// value: class selector
|
||||
// default: .timeline-time
|
||||
|
||||
timelineTriggerContainer: options['timelineTriggerContainer'] || '.timeline-series',
|
||||
// Wrapper surrounding a series of events corresponding to the timelineSectionMarker
|
||||
// value: selector
|
||||
// default: .timeline-series
|
||||
// note: changing this selector from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineTriggerAnchor: options['timelineTriggerAnchor'] || '.timeline-event',
|
||||
// Element that is wrapped around the event's title; when clicked, expands the event and reveals its full contents
|
||||
// value: class
|
||||
// default: .timeline-event
|
||||
// note: changing this tag from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineEventContainer: options['timelineEventContainer'] || 'dt',
|
||||
// Wrapper surrounding a series of events corresponding to the timelineSectionMarker
|
||||
// value: tag or class selector
|
||||
// default: dt
|
||||
// note: When leaving this value at its default, you do not need to apply a class to the dt element if you use the plugins recommended tag structure and markup
|
||||
// note: Change this from the default, perhaps to a class like ".timeline-event", in the case that you do not want to use the plugins recommened markup structure and prefer to use anothe element (e.g, div) instead of a dt tag to mark each event within a series.
|
||||
// note: Changing this value from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
timelineEXContent: options['timelineEXContent'] || '.timeline-event-content',
|
||||
// Element that contains the event's full content to be displayed when event is expanded, an event's expanded ID should alway be on this item
|
||||
// value: class selector
|
||||
// default: .timeline-event
|
||||
// note: changing this selector from the default will require modifications to the CSS file in order to retain default styling
|
||||
|
||||
EXContentIdSuffix: options['timelineEXContentSuffix'] || 'EX',
|
||||
// ID suffix to identify expanded (aka EX) content
|
||||
// value: string
|
||||
// default: EX
|
||||
|
||||
oneOpen: options['oneOpen'] || false,
|
||||
// sets whether only one item on the timeline can be open at a time. If true, other items will close when one is opened.
|
||||
// value: true | false
|
||||
// default: false
|
||||
// note: does not apply to events identified in startOpen option
|
||||
|
||||
startState: options['startState'] || 'closed',
|
||||
// sets whether the timeline is initially collapsed, fully expanded, or "flat" mode
|
||||
// value: closed | open | flat
|
||||
// default: closed
|
||||
// note: setting to "open" makes the startOpen option meaningless
|
||||
// note: flat mode initally collapses the entire timeline except for the major markers
|
||||
// note: the flat state is an initial display option only -- the timeline major markers return to normal once they've been opened/displayed
|
||||
|
||||
startOpen: options['startOpen'] || ['.start-open'],
|
||||
// As of version 2.3, you can simply add the "start-open" class to each timeline-event you want to have open by default; see the demo source code or code sample below
|
||||
// sets the events to display expanded on page load
|
||||
// value: array of IDs of single timelineEvents (e.g., ['#event01'] or ['#event01','#event02'])
|
||||
// default: ['.start-open']
|
||||
|
||||
baseSpeed: options['baseSpeed'] || 200,
|
||||
// sets the base speed for animation of an event
|
||||
// value: numeric
|
||||
// default: 200
|
||||
|
||||
speed: options['speed'] || 4,
|
||||
// multiplier applied to the base speed that sets the speed at which an event's contents are displayed and hidden
|
||||
// value: numeric
|
||||
// default: 4
|
||||
|
||||
fontOpen: options['fontOpen'] || '1.2em',
|
||||
// sets the font size of an event after it is opened
|
||||
// value: any valid CSS font-size value,
|
||||
// default: 1.2em
|
||||
|
||||
fontClosed: options['fontClosed'] || '1em',
|
||||
// sets the font size of an event after it is closed
|
||||
// value: any valid CSS font-size value
|
||||
// defaults: 1em
|
||||
|
||||
expandAllText: options ['expandAllText'] || '+ expand all',
|
||||
// sets the text of the expandAll selector after the timeline is fully collapsed
|
||||
// value: string
|
||||
// default: + expand all
|
||||
|
||||
collapseAllText: options['collapseAllText'] || '- collapse all'
|
||||
//sets the text of the expandAll selector after the timeline is fully expanded
|
||||
// value: string
|
||||
// default: - collapse all
|
||||
};
|
||||
|
||||
function openStartEvents(events) {
|
||||
// show startOpen events
|
||||
$.each(events, function(index, value) {
|
||||
|
||||
// first make sure all events in the series are visible (overriding flat mode), then show individual events per option settings
|
||||
$(value).parents(settings.timelineTriggerContainer).show(settings.speed*settings.baseSpeed, function(){
|
||||
openEvent($(value),$(value).next(settings.timelineEXContent));
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function openEvent(eventHeading,eventBody) {
|
||||
|
||||
if(settings.startState==='flat'){
|
||||
// if flat mode, make sure parent series is visible
|
||||
$(eventHeading).parents(settings.timelineTriggerContainer).show();
|
||||
}
|
||||
|
||||
$(eventHeading).find('a')
|
||||
.removeClass('closed')
|
||||
.addClass('open')
|
||||
.animate({ fontSize: settings.fontOpen }, settings.baseSpeed);
|
||||
$(eventBody).show(settings.speed*settings.baseSpeed);
|
||||
|
||||
}
|
||||
|
||||
function closeEvent(eventHeading,eventBody) {
|
||||
|
||||
$(eventHeading).find('a')
|
||||
.animate({ fontSize: settings.fontClosed }, 0)
|
||||
.removeClass('open')
|
||||
.addClass('closed');
|
||||
$(eventBody).hide(settings.speed*settings.baseSpeed);
|
||||
}
|
||||
|
||||
if ($(settings.timelineContainer).data('started')) {
|
||||
return;
|
||||
// we already initialized this timelineContainer
|
||||
} else {
|
||||
$(settings.timelineContainer).data('started', true);
|
||||
$(settings.timelineContainer+" "+".timeline-toggle").html(settings.expandAllText);
|
||||
$(settings.timelineContainer+" "+".collapseAll").html(settings.collapseAllText);
|
||||
|
||||
if(settings.startState==='flat')
|
||||
{
|
||||
// hide all series (event headings)
|
||||
$(settings.timelineContainer+' '+settings.timelineTriggerContainer).hide();
|
||||
|
||||
openStartEvents($(settings.startOpen));
|
||||
|
||||
}else if(settings.startState==='closed')
|
||||
{
|
||||
// If startState option is set to closed, hide all the event contents; else, show fully expanded upon load
|
||||
|
||||
// Close all items
|
||||
$(settings.timelineContainer+" "+settings.timelineEXContent).hide();
|
||||
|
||||
openStartEvents($(settings.startOpen));
|
||||
|
||||
}else{
|
||||
|
||||
// Open all items
|
||||
openEvent($(settings.timelineContainer+" "+settings.timelineTriggerContainer+" "+settings.timelineTriggerAnchor),$(settings.timelineContainer+" "+settings.timelineEXContent));
|
||||
|
||||
}
|
||||
|
||||
// Minor Event Click
|
||||
$(settings.timelineContainer).on("click",settings.timelineTriggerContainer+" "+settings.timelineEventContainer,function(){
|
||||
|
||||
var currentId = $(this).attr('id');
|
||||
|
||||
// if the event is currently open
|
||||
if($(this).find('a').is('.open'))
|
||||
{
|
||||
closeEvent($(this),$("#"+currentId+settings.EXContentIdSuffix))
|
||||
|
||||
} else{
|
||||
// if the event is currently closed
|
||||
|
||||
if( settings.oneOpen == true ) {
|
||||
closeEvent($(this).parents(settings.timelineContainer).find(settings.timelineTriggerAnchor,settings.timelineTriggerContainer),$(this).parents(settings.timelineContainer).find(settings.timelineEXContent));
|
||||
}
|
||||
|
||||
openEvent($(this),$("#"+currentId+settings.EXContentIdSuffix));
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Major Marker Click
|
||||
// Overrides the 'oneOpen' option
|
||||
$(settings.timelineContainer).on("click",settings.timelineSectionMarker,function()
|
||||
{
|
||||
|
||||
// number of minor events under this major event
|
||||
var numEvents = $(this).parents(settings.timelineSection).find(settings.timelineTriggerContainer).length;
|
||||
|
||||
// number of minor events already open
|
||||
var numOpen = $(this).parents(settings.timelineSection).find('.open').length;
|
||||
|
||||
// This closes other items if oneOpen is true. It looks odd if an item in the section was open. Need to improve this.
|
||||
if( settings.oneOpen == true ) {
|
||||
closeEvent($(this).parents(settings.timelineContainer).find(settings.timelineTriggerAnchor,settings.timelineTriggerContainer),$(this).parents(settings.timelineContainer).find(settings.timelineEXContent));
|
||||
}
|
||||
|
||||
if(numEvents > numOpen)
|
||||
{
|
||||
// if there are more events available than are displayed, then fully expand all events below MajorMarker
|
||||
openEvent($(this).parents(settings.timelineSection).find(settings.timelineTriggerAnchor,settings.timelineTriggerContainer),$(this).parents(settings.timelineSection).find(settings.timelineEXContent));
|
||||
}else
|
||||
{
|
||||
closeEvent($(this).parents(settings.timelineSection).find(settings.timelineTriggerContainer),$(this).parents(settings.timelineSection).find(settings.timelineEXContent));
|
||||
}
|
||||
});
|
||||
|
||||
// All Markers/Events
|
||||
var el = settings.timelineContainer+" "+".timeline-toggle";
|
||||
$(el).click(function()
|
||||
{
|
||||
if($(el).hasClass('expanded'))
|
||||
{
|
||||
|
||||
closeEvent($(el).parents(settings.timelineContainer).find(settings.timelineTriggerAnchor,settings.timelineTriggerContainer),$(el).parents(settings.timelineContainer).find(settings.timelineEXContent));
|
||||
$(el).removeClass('expanded').html(settings.expandAllText);
|
||||
|
||||
} else{
|
||||
|
||||
openEvent($(el).parents(settings.timelineContainer).find(settings.timelineTriggerAnchor,settings.timelineTriggerContainer),$(el).parents(settings.timelineContainer).find(settings.timelineEXContent));
|
||||
$(el).addClass('expanded').html(settings.collapseAllText);
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
6
contact-center/app/src/main/resources/static/js/timeliner/js/timeliner.min.js
vendored
Normal file
6
contact-center/app/src/main/resources/static/js/timeliner/js/timeliner.min.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
/*
|
||||
* Timeliner.js
|
||||
* @version 2.31
|
||||
* @copyright Tarek Anandan (http://www.technotarek.com)
|
||||
*/
|
||||
!function(e){function n(n){function i(n){e.each(n,function(n,i){e(i).parents(r.timelineTriggerContainer).show(r.speed*r.baseSpeed,function(){t(e(i),e(i).next(r.timelineEXContent))})})}function t(n,i){"flat"===r.startState&&e(n).parents(r.timelineTriggerContainer).show(),e(n).find("a").removeClass("closed").addClass("open").animate({fontSize:r.fontOpen},r.baseSpeed),e(i).show(r.speed*r.baseSpeed)}function l(n,i){e(n).find("a").animate({fontSize:r.fontClosed},0).removeClass("open").addClass("closed"),e(i).hide(r.speed*r.baseSpeed)}var r={timelineContainer:n.timelineContainer||"#timeline",timelineSection:n.timelineSection||".timeline-wrapper",timelineSectionMarker:n.timelineSectionMarker||".timeline-time",timelineTriggerContainer:n.timelineTriggerContainer||".timeline-series",timelineTriggerAnchor:n.timelineTriggerAnchor||".timeline-event",timelineEventContainer:n.timelineEventContainer||"dt",timelineEXContent:n.timelineEXContent||".timeline-event-content",EXContentIdSuffix:n.timelineEXContentSuffix||"EX",oneOpen:n.oneOpen||!1,startState:n.startState||"closed",startOpen:n.startOpen||[".start-open"],baseSpeed:n.baseSpeed||200,speed:n.speed||4,fontOpen:n.fontOpen||"1.2em",fontClosed:n.fontClosed||"1em",expandAllText:n.expandAllText||"+ expand all",collapseAllText:n.collapseAllText||"- collapse all"};if(!e(r.timelineContainer).data("started")){e(r.timelineContainer).data("started",!0),e(r.timelineContainer+" .timeline-toggle").html(r.expandAllText),e(r.timelineContainer+" .collapseAll").html(r.collapseAllText),"flat"===r.startState?(e(r.timelineContainer+" "+r.timelineTriggerContainer).hide(),i(e(r.startOpen))):"closed"===r.startState?(e(r.timelineContainer+" "+r.timelineEXContent).hide(),i(e(r.startOpen))):t(e(r.timelineContainer+" "+r.timelineTriggerContainer+" "+r.timelineTriggerAnchor),e(r.timelineContainer+" "+r.timelineEXContent)),e(r.timelineContainer).on("click",r.timelineTriggerContainer+" "+r.timelineEventContainer,function(){var n=e(this).attr("id");e(this).find("a").is(".open")?l(e(this),e("#"+n+r.EXContentIdSuffix)):(1==r.oneOpen&&l(e(this).parents(r.timelineContainer).find(r.timelineTriggerAnchor,r.timelineTriggerContainer),e(this).parents(r.timelineContainer).find(r.timelineEXContent)),t(e(this),e("#"+n+r.EXContentIdSuffix)))}),e(r.timelineContainer).on("click",r.timelineSectionMarker,function(){var n=e(this).parents(r.timelineSection).find(r.timelineTriggerContainer).length,i=e(this).parents(r.timelineSection).find(".open").length;1==r.oneOpen&&l(e(this).parents(r.timelineContainer).find(r.timelineTriggerAnchor,r.timelineTriggerContainer),e(this).parents(r.timelineContainer).find(r.timelineEXContent)),n>i?t(e(this).parents(r.timelineSection).find(r.timelineTriggerAnchor,r.timelineTriggerContainer),e(this).parents(r.timelineSection).find(r.timelineEXContent)):l(e(this).parents(r.timelineSection).find(r.timelineTriggerContainer),e(this).parents(r.timelineSection).find(r.timelineEXContent))});var o=r.timelineContainer+" .timeline-toggle";e(o).click(function(){e(o).hasClass("expanded")?(l(e(o).parents(r.timelineContainer).find(r.timelineTriggerAnchor,r.timelineTriggerContainer),e(o).parents(r.timelineContainer).find(r.timelineEXContent)),e(o).removeClass("expanded").html(r.expandAllText)):(t(e(o).parents(r.timelineContainer).find(r.timelineTriggerAnchor,r.timelineTriggerContainer),e(o).parents(r.timelineContainer).find(r.timelineEXContent)),e(o).addClass("expanded").html(r.collapseAllText))})}}e.timeliner=function(i){null==e.timeliners?(e.timeliners={options:[]},e.timeliners.options.push(i)):e.timeliners.options.push(i),e(document).ready(function(){for(var i=0;i<e.timeliners.options.length;i++)n(e.timeliners.options[i])})}}(jQuery);
|
||||
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/close.gif
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/close.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/next.gif
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/next.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-circle.png
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-circle.png
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-dots.png
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-dots.png
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-ios.png
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-ios.png
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-quads.png
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload-quads.png
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload.png
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/preload.png
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/prev.gif
vendored
Executable file
BIN
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/prev.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
338
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/venobox.css
vendored
Executable file
338
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/venobox.css
vendored
Executable file
@ -0,0 +1,338 @@
|
||||
/* ------ venobox.css --------*/
|
||||
.vbox-overlay *, .vbox-overlay *:before, .vbox-overlay *:after{
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
|
||||
body{
|
||||
-webkit-overflow-scrolling:touch;
|
||||
}
|
||||
/* ------- overlay: change here background color and opacity ----- */
|
||||
.vbox-overlay{
|
||||
background: #181818;
|
||||
background: rgba(0,0,0,0.85);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .25s ease-in-out;
|
||||
-moz-transition: opacity .25s ease-in-out;
|
||||
-webkit-transition: opacity .25s ease-in-out;
|
||||
}
|
||||
.relativo{
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
/* ----- preloader - choose between CIRCLE, IOS, DOTS, QUADS ----- */
|
||||
|
||||
/* circle preloader */
|
||||
.vbox-preloader{
|
||||
position:fixed;
|
||||
width:32px;
|
||||
height:32px;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-16px;
|
||||
margin-top:-16px;
|
||||
background-image: url(preload-circle.png);
|
||||
text-indent: -100px;
|
||||
overflow: hidden;
|
||||
-webkit-animation: playload 1.4s steps(18) infinite;
|
||||
-moz-animation: playload 1.4s steps(18) infinite;
|
||||
-ms-animation: playload 1.4s steps(18) infinite;
|
||||
-o-animation: playload 1.4s steps(18) infinite;
|
||||
animation: playload 1.4s steps(18) infinite;
|
||||
}
|
||||
@-webkit-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -576px; }
|
||||
}
|
||||
@-moz-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -576px; }
|
||||
}
|
||||
@-ms-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -576px; }
|
||||
}
|
||||
@-o-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -576px; }
|
||||
}
|
||||
@keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -576px; }
|
||||
}
|
||||
/* IOS preloader */
|
||||
/*
|
||||
.vbox-preloader{
|
||||
position:fixed;
|
||||
width:32px;
|
||||
height:32px;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-16px;
|
||||
margin-top:-16px;
|
||||
background-image: url(preload-ios.png);
|
||||
text-indent: -100px;
|
||||
overflow: hidden;
|
||||
-webkit-animation: playload 1.4s steps(12) infinite;
|
||||
-moz-animation: playload 1.4s steps(12) infinite;
|
||||
-ms-animation: playload 1.4s steps(12) infinite;
|
||||
-o-animation: playload 1.4s steps(12) infinite;
|
||||
animation: playload 1.4s steps(12) infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@-moz-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@-ms-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@-o-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
*/
|
||||
/* dots preloader */
|
||||
/*
|
||||
.vbox-preloader{
|
||||
position:fixed;
|
||||
width:32px;
|
||||
height:11px;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-16px;
|
||||
margin-top:-16px;
|
||||
background-image: url(preload-dots.png);
|
||||
text-indent: -100px;
|
||||
overflow: hidden;
|
||||
-webkit-animation: playload 1.4s steps(24) infinite;
|
||||
-moz-animation: playload 1.4s steps(24) infinite;
|
||||
-ms-animation: playload 1.4s steps(24) infinite;
|
||||
-o-animation: playload 1.4s steps(24) infinite;
|
||||
animation: playload 1.4s steps(24) infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -768px; }
|
||||
}
|
||||
@-moz-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -768px; }
|
||||
}
|
||||
@-ms-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -768px; }
|
||||
}
|
||||
@-o-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -768px; }
|
||||
}
|
||||
@keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -768px; }
|
||||
}
|
||||
*/
|
||||
/* quads preloader */
|
||||
/*
|
||||
.vbox-preloader{
|
||||
position:fixed;
|
||||
width:32px;
|
||||
height:10px;
|
||||
left:50%;
|
||||
top:50%;
|
||||
margin-left:-16px;
|
||||
margin-top:-16px;
|
||||
background-image: url(preload-quads.png);
|
||||
text-indent: -100px;
|
||||
overflow: hidden;
|
||||
-webkit-animation: playload 1.4s steps(12) infinite;
|
||||
-moz-animation: playload 1.4s steps(12) infinite;
|
||||
-ms-animation: playload 1.4s steps(12) infinite;
|
||||
-o-animation: playload 1.4s steps(12) infinite;
|
||||
animation: playload 1.4s steps(12) infinite;
|
||||
}
|
||||
@-webkit-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@-moz-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@-ms-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@-o-keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
@keyframes playload {
|
||||
from { background-position: 0px; }
|
||||
to { background-position: -384px; }
|
||||
}
|
||||
*/
|
||||
/* ----- navigation ----- */
|
||||
.vbox-close{
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
width: 46px;
|
||||
height: 40px;
|
||||
padding: 10px 20px 10px 0;
|
||||
display: block;
|
||||
background: url(close.gif) no-repeat #161617;
|
||||
background-position:10px center;
|
||||
color: #fff;
|
||||
text-indent: -100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vbox-next, .vbox-prev{
|
||||
box-sizing: content-box;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
color: #fff;
|
||||
width: 30px;
|
||||
height: 170px;
|
||||
margin-top: -85px;
|
||||
text-indent: -100px;
|
||||
border: solid transparent; /* Using border instead of padding to keep bg image in place */
|
||||
overflow: hidden;
|
||||
}
|
||||
.vbox-prev{
|
||||
left: 0;
|
||||
border-width: 0 30px 0 10px;
|
||||
background: url(prev.gif) center center no-repeat;
|
||||
}
|
||||
.vbox-next{
|
||||
right: 0;
|
||||
border-width: 0 10px 0 30px;
|
||||
background: url(next.gif) center center no-repeat;
|
||||
}
|
||||
|
||||
.vbox-title{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
float: left;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 6px 40px;
|
||||
overflow: hidden;
|
||||
background: #161617;
|
||||
position: fixed;
|
||||
display: none;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
.vbox-num{
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
top: -1px;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
display: block;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
padding: 6px 10px;
|
||||
background: #161617;
|
||||
display: none;
|
||||
}
|
||||
/* ------- inline window ------ */
|
||||
.vbox-inline{
|
||||
width: 420px;
|
||||
height: 315px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* ------- Video & iFrames window ------ */
|
||||
.venoframe{
|
||||
border: none;
|
||||
width: 960px;
|
||||
height: 720px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.venoframe{
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.venoframe{
|
||||
width: 420px;
|
||||
height: 315px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 460px) {
|
||||
.vbox-inline{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.venoframe{
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------- PLease do NOT edit this! (or do it at your own risk) ------ */
|
||||
.vbox-container{
|
||||
position: relative;
|
||||
background: #000;
|
||||
width: 98%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.vbox-content{
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.vbox-container img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.vwrap{
|
||||
opacity: 1;
|
||||
transition: opacity .25s ease-in-out;
|
||||
-moz-transition: opacity .25s ease-in-out;
|
||||
-webkit-transition: opacity .25s ease-in-out;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
515
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/venobox.js
vendored
Executable file
515
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/venobox.js
vendored
Executable file
@ -0,0 +1,515 @@
|
||||
/*
|
||||
* VenoBox - jQuery Plugin
|
||||
* version: 1.5.1
|
||||
* @requires jQuery
|
||||
*
|
||||
* Examples at http://lab.veno.it/venobox/
|
||||
* License: Creative Commons Attribution 3.0 License
|
||||
* License URI: http://creativecommons.org/licenses/by/3.0/
|
||||
* Copyright 2013-2014 Nicola Franchini - @nicolafranchini
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
|
||||
var ios, ie9, overlayColor, overlay, vwrap, container, content, core, dest, top, sonH, finH, margine, prima, type, thisgall, items, thenext, theprev, title, nextok, prevok, keyNavigationDisabled, blocktitle, blocknum, evitanext, evitaprev, evitacontent, figliall, extraCss;
|
||||
|
||||
$.fn.extend({
|
||||
//plugin name - venobox
|
||||
venobox: function(options) {
|
||||
|
||||
// default options
|
||||
var defaults = {
|
||||
framewidth: '',
|
||||
frameheight: '',
|
||||
border: '0',
|
||||
bgcolor: '#fff',
|
||||
titleattr: 'title', // specific attribute to get a title (e.g. [data-title]) - thanx @mendezcode
|
||||
numeratio: false,
|
||||
infinigall: false
|
||||
};
|
||||
|
||||
var options = $.extend(defaults, options);
|
||||
|
||||
return this.each(function() {
|
||||
var obj = $(this);
|
||||
|
||||
// Prevent double initialization - thanx @matthistuff
|
||||
if(obj.data('venobox')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
obj.addClass('vbox-item');
|
||||
obj.data('framewidth', options.framewidth);
|
||||
obj.data('frameheight', options.frameheight);
|
||||
obj.data('border', options.border);
|
||||
obj.data('bgcolor', options.bgcolor);
|
||||
obj.data('numeratio', options.numeratio);
|
||||
obj.data('infinigall', options.infinigall);
|
||||
obj.data('venobox', true);
|
||||
|
||||
ios = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
|
||||
|
||||
// IE 9 or less
|
||||
ie9 = ((document.all && !window.atob) ? true : false);
|
||||
|
||||
obj.click(function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
obj = $(this);
|
||||
overlayColor = obj.data('overlay');
|
||||
framewidth = obj.data('framewidth');
|
||||
frameheight = obj.data('frameheight');
|
||||
border = obj.data('border');
|
||||
bgcolor = obj.data('bgcolor');
|
||||
nextok = false;
|
||||
prevok = false;
|
||||
keyNavigationDisabled = false;
|
||||
dest = obj.attr('href');
|
||||
top = $(window).scrollTop();
|
||||
top = -top;
|
||||
extraCss = obj.data( 'css' ) || "";
|
||||
|
||||
$('body').wrapInner('<div class="vwrap"></div>')
|
||||
|
||||
vwrap = $('.vwrap');
|
||||
core = '<div class="vbox-overlay ' + extraCss + '" style="background:'+ overlayColor +'"><div class="vbox-preloader">Loading...</div><div class="vbox-container"><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-num">0/0</div><div class="vbox-close">X</div><div class="vbox-next">next</div><div class="vbox-prev">prev</div></div>';
|
||||
|
||||
$('body').append(core);
|
||||
|
||||
overlay = $('.vbox-overlay');
|
||||
container = $('.vbox-container');
|
||||
content = $('.vbox-content');
|
||||
blocknum = $('.vbox-num');
|
||||
blocktitle = $('.vbox-title');
|
||||
|
||||
content.html('');
|
||||
content.css('opacity', '0');
|
||||
|
||||
checknav();
|
||||
|
||||
overlay.css('min-height', $(window).outerHeight());
|
||||
|
||||
if (ie9) {
|
||||
overlay.animate({opacity:1}, 250, function(){
|
||||
overlay.css({
|
||||
'min-height': $(window).outerHeight(),
|
||||
height : 'auto'
|
||||
});
|
||||
if(obj.data('type') == 'iframe'){
|
||||
loadIframe();
|
||||
}else if (obj.data('type') == 'inline'){
|
||||
loadInline();
|
||||
}else if (obj.data('type') == 'ajax'){
|
||||
loadAjax();
|
||||
}else if (obj.data('type') == 'vimeo'){
|
||||
loadVimeo();
|
||||
}else if (obj.data('type') == 'youtube'){
|
||||
loadYoutube();
|
||||
} else {
|
||||
content.html('<img src="'+dest+'">');
|
||||
preloadFirst();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
|
||||
|
||||
// Check if transition is on the overlay - thanx @kanduvisla
|
||||
if( e.target != e.currentTarget ) {
|
||||
return;
|
||||
}
|
||||
|
||||
overlay.css({
|
||||
'min-height': $(window).outerHeight(),
|
||||
height : 'auto'
|
||||
});
|
||||
if(obj.data('type') == 'iframe'){
|
||||
loadIframe();
|
||||
}else if (obj.data('type') == 'inline'){
|
||||
loadInline();
|
||||
}else if (obj.data('type') == 'ajax'){
|
||||
loadAjax();
|
||||
}else if (obj.data('type') == 'vimeo'){
|
||||
loadVimeo();
|
||||
}else if (obj.data('type') == 'youtube'){
|
||||
loadYoutube();
|
||||
} else {
|
||||
content.html('<img src="'+dest+'">');
|
||||
preloadFirst();
|
||||
}
|
||||
});
|
||||
overlay.css('opacity', '1');
|
||||
}
|
||||
|
||||
if (ios) {
|
||||
vwrap.css({
|
||||
'position': 'fixed',
|
||||
'top': top,
|
||||
'opacity': '0'
|
||||
}).data('top', top);
|
||||
} else {
|
||||
vwrap.css({
|
||||
'position': 'fixed',
|
||||
'top': top,
|
||||
}).data('top', top);
|
||||
$(window).scrollTop(0);
|
||||
}
|
||||
|
||||
/* -------- CHECK NEXT / PREV -------- */
|
||||
function checknav(){
|
||||
|
||||
thisgall = obj.data('gall');
|
||||
numeratio = obj.data('numeratio');
|
||||
infinigall = obj.data('infinigall');
|
||||
|
||||
items = $('.vbox-item[data-gall="' + thisgall + '"]');
|
||||
|
||||
if(items.length > 0 && numeratio === true){
|
||||
blocknum.html(items.index(obj)+1 + ' / ' + items.length);
|
||||
blocknum.fadeIn();
|
||||
}else{
|
||||
blocknum.fadeOut();
|
||||
}
|
||||
|
||||
thenext = items.eq( items.index(obj) + 1 );
|
||||
theprev = items.eq( items.index(obj) - 1 );
|
||||
|
||||
if(obj.attr(options.titleattr)){
|
||||
title = obj.attr(options.titleattr);
|
||||
blocktitle.fadeIn();
|
||||
}else{
|
||||
title = '';
|
||||
blocktitle.fadeOut();
|
||||
}
|
||||
|
||||
if (items.length > 0 && infinigall === true) {
|
||||
|
||||
nextok = true;
|
||||
prevok = true;
|
||||
|
||||
if(thenext.length < 1 ){
|
||||
thenext = items.eq(0);
|
||||
}
|
||||
if(items.index(obj) < 1 ){
|
||||
theprev = items.eq( items.index(items.length) );
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if(thenext.length > 0 ){
|
||||
$('.vbox-next').css('display', 'block');
|
||||
nextok = true;
|
||||
}else{
|
||||
$('.vbox-next').css('display', 'none');
|
||||
nextok = false;
|
||||
}
|
||||
if(items.index(obj) > 0 ){
|
||||
$('.vbox-prev').css('display', 'block');
|
||||
prevok = true;
|
||||
}else{
|
||||
$('.vbox-prev').css('display', 'none');
|
||||
prevok = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* -------- NAVIGATION CODE -------- */
|
||||
var gallnav = {
|
||||
|
||||
prev: function() {
|
||||
|
||||
if (keyNavigationDisabled) return; else keyNavigationDisabled = true;
|
||||
|
||||
overlayColor = theprev.data('overlay');
|
||||
|
||||
framewidth = theprev.data('framewidth');
|
||||
frameheight = theprev.data('frameheight');
|
||||
border = theprev.data('border');
|
||||
bgcolor = theprev.data('bgcolor');
|
||||
|
||||
dest = theprev.attr('href');
|
||||
|
||||
if(theprev.attr(options.titleattr)){
|
||||
title = theprev.attr(options.titleattr);
|
||||
}else{
|
||||
title = '';
|
||||
}
|
||||
|
||||
if (overlayColor === undefined ) {
|
||||
overlayColor = "";
|
||||
}
|
||||
|
||||
overlay.css('min-height', $(window).outerHeight());
|
||||
|
||||
content.animate({ opacity:0}, 500, function(){
|
||||
overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);
|
||||
|
||||
if (theprev.data('type') == 'iframe') {
|
||||
loadIframe();
|
||||
} else if (theprev.data('type') == 'inline'){
|
||||
loadInline();
|
||||
} else if (theprev.data('type') == 'ajax'){
|
||||
loadAjax();
|
||||
} else if (theprev.data('type') == 'youtube'){
|
||||
loadYoutube();
|
||||
} else if (theprev.data('type') == 'vimeo'){
|
||||
loadVimeo();
|
||||
}else{
|
||||
content.html('<img src="'+dest+'">');
|
||||
preloadFirst();
|
||||
}
|
||||
obj = theprev;
|
||||
checknav();
|
||||
keyNavigationDisabled = false;
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
next: function() {
|
||||
|
||||
if (keyNavigationDisabled) return; else keyNavigationDisabled = true;
|
||||
|
||||
overlayColor = thenext.data('overlay');
|
||||
|
||||
framewidth = thenext.data('framewidth');
|
||||
frameheight = thenext.data('frameheight');
|
||||
border = thenext.data('border');
|
||||
bgcolor = thenext.data('bgcolor');
|
||||
|
||||
|
||||
dest = thenext.attr('href');
|
||||
|
||||
if(thenext.attr(options.titleattr)){
|
||||
title = thenext.attr(options.titleattr);
|
||||
}else{
|
||||
title = '';
|
||||
}
|
||||
|
||||
if (overlayColor === undefined ) {
|
||||
overlayColor = "";
|
||||
}
|
||||
|
||||
overlay.css('min-height', $(window).outerHeight());
|
||||
|
||||
content.animate({ opacity:0}, 500, function(){
|
||||
overlay.css('min-height', $(window).outerHeight()).css('background',overlayColor);
|
||||
|
||||
if (thenext.data('type') == 'iframe') {
|
||||
loadIframe();
|
||||
} else if (thenext.data('type') == 'inline'){
|
||||
loadInline();
|
||||
} else if (thenext.data('type') == 'ajax'){
|
||||
loadAjax();
|
||||
} else if (thenext.data('type') == 'youtube'){
|
||||
loadYoutube();
|
||||
} else if (thenext.data('type') == 'vimeo'){
|
||||
loadVimeo();
|
||||
}else{
|
||||
content.html('<img src="'+dest+'">');
|
||||
preloadFirst();
|
||||
}
|
||||
obj = thenext;
|
||||
checknav();
|
||||
keyNavigationDisabled = false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* -------- NAVIGATE WITH ARROW KEYS -------- */
|
||||
$('body').keydown(function(e) {
|
||||
|
||||
if(e.keyCode == 37 && prevok == true) { // left
|
||||
gallnav.prev();
|
||||
}
|
||||
|
||||
if(e.keyCode == 39 && nextok == true) { // right
|
||||
gallnav.next();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* -------- PREVGALL -------- */
|
||||
$('.vbox-prev').click(function(){
|
||||
gallnav.prev();
|
||||
});
|
||||
|
||||
/* -------- NEXTGALL -------- */
|
||||
$('.vbox-next').click(function(){
|
||||
gallnav.next();
|
||||
});
|
||||
|
||||
/* -------- ESCAPE HANDLER -------- */
|
||||
function escapeHandler(e) {
|
||||
if(e.keyCode === 27) {
|
||||
closeVbox();
|
||||
}
|
||||
}
|
||||
|
||||
/* -------- CLOSE VBOX -------- */
|
||||
|
||||
function closeVbox(){
|
||||
|
||||
$('body').unbind('keydown', escapeHandler);
|
||||
|
||||
if (ie9) {
|
||||
|
||||
overlay.animate({opacity:0}, 500, function(){
|
||||
overlay.remove();
|
||||
$('.vwrap').children().unwrap();
|
||||
$(window).scrollTop(-top);
|
||||
keyNavigationDisabled = false;
|
||||
obj.focus();
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
overlay.unbind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd");
|
||||
overlay.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
|
||||
|
||||
// Check if transition is on the overlay - thanx @kanduvisla
|
||||
if( e.target != e.currentTarget ) {
|
||||
return;
|
||||
}
|
||||
|
||||
overlay.remove();
|
||||
if (ios) {
|
||||
$('.vwrap').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
|
||||
$('.vwrap').children().unwrap();
|
||||
$(window).scrollTop(-top);
|
||||
});
|
||||
$('.vwrap').css('opacity', '1');
|
||||
}else{
|
||||
$('.vwrap').children().unwrap();
|
||||
$(window).scrollTop(-top);
|
||||
}
|
||||
keyNavigationDisabled = false;
|
||||
obj.focus();
|
||||
});
|
||||
overlay.css('opacity', '0');
|
||||
}
|
||||
}
|
||||
|
||||
/* -------- CLOSE CLICK -------- */
|
||||
$('.vbox-close, .vbox-overlay').click(function(e){
|
||||
evitacontent = '.figlio';
|
||||
evitaprev = '.vbox-prev';
|
||||
evitanext = '.vbox-next';
|
||||
figliall = '.figlio *';
|
||||
if(!$(e.target).is(evitacontent) && !$(e.target).is(evitanext) && !$(e.target).is(evitaprev)&& !$(e.target).is(figliall)){
|
||||
closeVbox();
|
||||
}
|
||||
});
|
||||
$('body').keydown(escapeHandler);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* -------- LOAD AJAX -------- */
|
||||
function loadAjax(){
|
||||
$.ajax({
|
||||
url: dest,
|
||||
cache: false
|
||||
}).done(function( msg ) {
|
||||
content.html('<div class="vbox-inline">'+ msg +'</div>');
|
||||
updateoverlay(true);
|
||||
|
||||
}).fail(function() {
|
||||
content.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>');
|
||||
updateoverlay(true);
|
||||
})
|
||||
}
|
||||
|
||||
/* -------- LOAD IFRAME -------- */
|
||||
function loadIframe(){
|
||||
content.html('<iframe class="venoframe" src="'+dest+'"></iframe>');
|
||||
// $('.venoframe').load(function(){ // valid only for iFrames in same domain
|
||||
updateoverlay();
|
||||
// });
|
||||
}
|
||||
|
||||
/* -------- LOAD VIMEO -------- */
|
||||
function loadVimeo(){
|
||||
var pezzi = dest.split('/');
|
||||
var videoid = pezzi[pezzi.length-1];
|
||||
content.html('<iframe class="venoframe" src="//player.vimeo.com/video/'+videoid+'"></iframe>')
|
||||
updateoverlay();
|
||||
}
|
||||
|
||||
/* -------- LOAD YOUTUBE -------- */
|
||||
function loadYoutube(){
|
||||
var pezzi = dest.split('/');
|
||||
var videoid = pezzi[pezzi.length-1];
|
||||
content.html('<iframe class="venoframe" allowfullscreen src="//www.youtube.com/embed/'+videoid+'"></iframe>')
|
||||
updateoverlay();
|
||||
}
|
||||
|
||||
/* -------- LOAD INLINE -------- */
|
||||
function loadInline(){
|
||||
content.html('<div class="vbox-inline">'+$(dest).html()+'</div>');
|
||||
updateoverlay();
|
||||
}
|
||||
|
||||
/* -------- PRELOAD IMAGE -------- */
|
||||
function preloadFirst(){
|
||||
prima = $('.vbox-content').find('img');
|
||||
prima.one('load', function() {
|
||||
updateoverlay();
|
||||
}).each(function() {
|
||||
if(this.complete) $(this).load();
|
||||
});
|
||||
}
|
||||
|
||||
/* -------- CENTER ON LOAD -------- */
|
||||
function updateoverlay(notopzero){
|
||||
notopzero = notopzero || false;
|
||||
if (notopzero != true) {
|
||||
$(window).scrollTop(0);
|
||||
}
|
||||
|
||||
blocktitle.html(title);
|
||||
content.find(">:first-child").addClass('figlio');
|
||||
$('.figlio').css('width', framewidth).css('height', frameheight).css('padding', border).css('background', bgcolor);
|
||||
|
||||
sonH = content.outerHeight();
|
||||
finH = $(window).height();
|
||||
|
||||
if(sonH+80 < finH){
|
||||
margine = (finH - sonH)/2;
|
||||
content.css('margin-top', margine);
|
||||
content.css('margin-bottom', margine);
|
||||
|
||||
}else{
|
||||
content.css('margin-top', '40px');
|
||||
content.css('margin-bottom', '40px');
|
||||
}
|
||||
content.animate({
|
||||
'opacity': '1'
|
||||
},'slow');
|
||||
}
|
||||
|
||||
/* -------- CENTER ON RESIZE -------- */
|
||||
function updateoverlayresize(){
|
||||
if($('.vbox-content').length){
|
||||
sonH = content.height();
|
||||
finH = $(window).height();
|
||||
|
||||
if(sonH+80 < finH){
|
||||
margine = (finH - sonH)/2;
|
||||
content.css('margin-top', margine);
|
||||
content.css('margin-bottom', margine);
|
||||
}else{
|
||||
content.css('margin-top', '40px');
|
||||
content.css('margin-bottom', '40px');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(window).resize(function(){
|
||||
updateoverlayresize();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
12
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/venobox.min.js
vendored
Executable file
12
contact-center/app/src/main/resources/static/js/timeliner/js/vendor/venobox/venobox.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
@ -0,0 +1,290 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>Timeliner.js Demo</title>
|
||||
<link rel="canonical" href="https://technotarek.com/timeliner/timeliner.html" />
|
||||
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/timeliner.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="inc/colorbox.css" type="text/css" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Timeliner</h1>
|
||||
<p class="lead">Working examples of the timeliner.js jquery plugin. This page features two working examples, which demonstrate several key features including expand/collapse, autostart/autoload, and multiple timelines per page. Also see the <a href="demo-future/timeliner-future.html">newer "Future" demo</a>, released along with version 2.0 of this plugin.</p>
|
||||
|
||||
<h2>The Civil Rights Movement 1954-1964</h2>
|
||||
|
||||
<p>The content used in this demo is from <a href="https://www.technotarek.com/case-studies/investigating-power">InvestigatingPower.org</a>, one of two initial places where I implemented timeliner. InvestigatingPower.org features a total of five timeliner-powered timelines covering the topics of <a href="https://investigatingpower.org/mccarthyism/" target="_blank">McCarthyism</a>, <a href="https://investigatingpower.org/civil-rights/" target="_blank">Civil Rights</a>, <a href="https://investigatingpower.org/vietnam/" target="_blank">the Vietnam War</a>, <a href="https://investigatingpower.org/watergate/" target="_blank">the Watergate Scandal</a>, <a href="https://investigatingpower.org/corporate-power/" target="_blank">Corporate Power (Tobacco)</a>, and <a href="https://investigatingpower.org/9-11/" target="_blank">Post 9/11</a>.</p>
|
||||
|
||||
<div id="timeline" class="timeline-container">
|
||||
|
||||
<button class="timeline-toggle">+ expand all</button>
|
||||
|
||||
<br class="clear">
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>1954</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="19540517" class="timeline-event"><a>Brown v. Board of Education</a></dt>
|
||||
<dd class="timeline-event-content" id="19540517EX">
|
||||
<h3>May 17, 1954</h3>
|
||||
<p>
|
||||
The U.S. Supreme Court hands down a unanimous 9-0 decision in the Brown v. Board of Education of Topeka case, opening the door for the civil rights movement and ultimately racial integration in all aspects of U.S. society. In overturning Plessy v. Ferguson (1896), the court rules that “separate educational facilities are inherently unequal.”</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>1955</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="19550828" class="timeline-event start-open"><a>Emmett Till</a></dt>
|
||||
<dd class="timeline-event-content" id="19550828EX">
|
||||
<h3>August 28, 1955</h3>
|
||||
|
||||
<div class="media">
|
||||
<a href="#inline-1955-08-282" class="CBmodal"><img src="http://img.youtube.com/vi/GU1wuqyOP98/0.jpg" width="240" height="180" alt="Related Video: The Emmett Till Murder"></a>
|
||||
<p class="mediaLink"><a href="#inline-1955-08-282" class="CBmodal" title="Related Video: The Emmett Till Murder">Watch: The Emmett Till Murder</a></p>
|
||||
<div style="display:none">
|
||||
<div id="inline-1955-08-282" class="modalBox">
|
||||
<object>
|
||||
<param name="movie" value="http://www.youtube.com/v/GU1wuqyOP98?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
|
||||
<param name="allowFullScreen" value="true">
|
||||
<param name="allowScriptAccess" value="always">
|
||||
<embed src="http://www.youtube.com/v/GU1wuqyOP98?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>
|
||||
Fourteen-year-old African-American Emmett Till is brutally murdered after reportedly flirting with a white woman while visiting relatives in Mississippi. For the first time, both black and white reporters cover the trial epitomizing "one of the most shocking and enduring stories of the twentieth century." The white defendants, Roy Bryant and J.W. Milam, are acquitted by an all-white jury in only 67 minutes; later they describe in full detail to Look magazine (which paid them $4,000) how they killed Till. His mother insists on an open casket funeral, and the powerful image of his mutilated body sparks a strong reaction across the country and the world.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
<dt id="19551201" class="timeline-event"><a>Rosa Parks</a></dt>
|
||||
<dd class="timeline-event-content" id="19551201EX">
|
||||
<h3>December 1, 1955</h3>
|
||||
<p>
|
||||
The arrest of Rosa Parks, a 42-year-old African-American seamstress and civil rights activist who refused to give up her bus seat to a white passenger, sets off a long anticipated bus boycott by residents of Montgomery, Ala. The 13-month protest and ensuing litigation eventually make it to the U.S. Supreme Court, which declares that segregation on public buses is unconstitutional. The Montgomery bus boycott brings the Rev. Dr. Martin Luther King Jr. and his nonviolent approach to social change to the forefront of the civil rights movement.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>1957</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="19570904" class="timeline-event start-open"><a>Little Rock</a></dt>
|
||||
<dd class="timeline-event-content" id="19570904EX">
|
||||
<h3>September 4, 1957</h3>
|
||||
|
||||
<div class="media">
|
||||
<a href="#inline-1957-09-044" class="CBmodal"><img src="http://img.youtube.com/vi/h148GEIgUeA/0.jpg" width="240" height="180" alt="Related Video: Reporting Little Rock"></a>
|
||||
<p class="mediaLink"><a href="#inline-1957-09-044" class="CBmodal" title="Related Video: Reporting Little Rock">Watch: Reporting Little Rock</a></p>
|
||||
<div style="display:none">
|
||||
<div id="inline-1957-09-044" class="modalBox">
|
||||
<object>
|
||||
<param name="movie" value="http://www.youtube.com/v/h148GEIgUeA?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
|
||||
<param name="allowFullScreen" value="true">
|
||||
<param name="allowScriptAccess" value="always">
|
||||
<embed src="http://www.youtube.com/v/h148GEIgUeA?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>
|
||||
Three years removed from the Brown v. Board of Education decision, Arkansas Gov. Orval Faubus orders the National Guard to stop nine black students from attending the all-white Little Rock Central High School. President Dwight D. Eisenhower intervenes by federalizing the National Guard and deploying Army troops to protect the students, stripping the state of power. Media coverage of the physical and verbal harassment the black students were subjected to is reported and broadcast around the world. In the end, they successfully integrate Central High.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>1961</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="19610504" class="timeline-event"><a>Freedom Rides</a></dt>
|
||||
<dd class="timeline-event-content" id="19610504EX">
|
||||
<h3>May 4, 1961</h3>
|
||||
|
||||
<div class="media">
|
||||
<a href="#inline-1961-05-045" class="CBmodal"><img src="http://img.youtube.com/vi/Sxe9dJoZ-AQ/0.jpg" width="240" height="180" alt="Related Video: Freedom Rides"></a>
|
||||
<p class="mediaLink"><a href="#inline-1961-05-045" class="CBmodal" title="Related Video: Freedom Rides">Watch: Freedom Rides</a></p>
|
||||
<div style="display:none">
|
||||
<div id="inline-1961-05-045" class="modalBox">
|
||||
<object>
|
||||
<param name="movie" value="http://www.youtube.com/v/Sxe9dJoZ-AQ?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
|
||||
<param name="allowFullScreen" value="true">
|
||||
<param name="allowScriptAccess" value="always">
|
||||
<embed src="http://www.youtube.com/v/Sxe9dJoZ-AQ?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>
|
||||
The first of many civil rights “Freedom Rides” leaves Washington, D.C., for New Orleans. The Freedom Riders want to test the validity of the Supreme Court’s decision to outlaw racial segregation in bus terminals and through interstate bus travel. Angry white mobs – with the blessing of Alabama law enforcement – meet the convoy in Anniston and Birmingham, brutally beating the Freedom Riders and firebombing one of the buses.<sup>7</sup></p>
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>1963</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="19630828" class="timeline-event"><a>"I Have a Dream"</a></dt>
|
||||
<dd class="timeline-event-content" id="19630828EX">
|
||||
<h3>August 28, 1963</h3>
|
||||
<div class="media">
|
||||
<a href="#inline-1963-08-287" class="CBmodal"><img src="http://img.youtube.com/vi/gvAQE66jwcg/0.jpg" width="240" height="180" alt="Related Video: Black Press"></a>
|
||||
<p class="mediaLink"><a href="#inline-1963-08-287" class="CBmodal" title="Related Video: Black Press">Watch: Black Press</a></p>
|
||||
<div style="display:none">
|
||||
<div id="inline-1963-08-287" class="modalBox">
|
||||
<object>
|
||||
<param name="movie" value="http://www.youtube.com/v/gvAQE66jwcg?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380">
|
||||
<param name="allowFullScreen" value="true">
|
||||
<param name="allowScriptAccess" value="always">
|
||||
<embed src="http://www.youtube.com/v/gvAQE66jwcg?fs=1&hd=0&showsearch=0&showinfo=0&width=640&height=380" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="380">
|
||||
</object>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.media -->
|
||||
|
||||
<p>
|
||||
In one of the largest gatherings in the nation’s capital and one of the first to be broadcast live on national television, at least 200,000 civil rights protesters stage a March on Washington concluding at the Lincoln Memorial. The march is dedicated to jobs and freedom and takes place 100 years after the Emancipation Proclamation. The highlight of the event is Martin Luther King Jr.’s historic “I Have a Dream” speech.</p>
|
||||
|
||||
<blockquote>
|
||||
I have a dream that one day this nation will rise up and live out the true meaning of its creed: "We hold these truths to be self-evident: that all men are created equal."
|
||||
<div class="attribution">—Martin Luthar King Jr.</div>
|
||||
</blockquote>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time"><span>1964</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="19640702" class="timeline-event"><a>Civil Rights Act</a></dt>
|
||||
<dd class="timeline-event-content" id="19640702EX">
|
||||
<h3>July 2, 1964</h3>
|
||||
<p>
|
||||
President Lyndon B. Johnson signs the Civil Rights Act of 1964, mandating equal opportunity employment, and complete desegregation of schools and other public facilities. It also outlaws unequal voter registration requirements. Although it would take years for these changes to take effect in communities around the country, the law is a monumental victory for the civil rights movement.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
|
||||
<dt id="19641014" class="timeline-event"><a>Nobel Peace Prize</a></dt>
|
||||
<dd class="timeline-event-content" id="19641014EX">
|
||||
<h3>October 14, 1964</h3>
|
||||
<p>Martin Luther King Jr. is awarded the Nobel Peace Prize; at 35, he is the youngest recipient.</p>
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<br class="clear">
|
||||
</div><!-- /#timelineContainer -->
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<h2>The Development of Timeliner.js</h2>
|
||||
<p>Your content isn't suited for a chronological presentation? No problem, get creative.</p>
|
||||
<p>The timeline below demonstrates some of the plugin's options including the oneOpen feature and semantic class customizations (see source code).
|
||||
|
||||
<div id="timeline-js" class="timeline-container">
|
||||
|
||||
<button class="timeline-toggle">+ expand all</button>
|
||||
|
||||
<br class="clear">
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="milestone"><span>Concept</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="born" class="timeline-event"><a>The idea is born</a></dt>
|
||||
<dd class="timeline-event-content" id="bornEX">
|
||||
<p>Two completely independent projects, one for the Institute for Educational Leadership and another for the Fund for Investigative Journalism, expressed interest in a timeline component for their website.</p>
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="milestone"><span>Prototype</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="realized" class="timeline-event"><a>The idea is realized</a></dt>
|
||||
<dd class="timeline-event-content" id="realizedEX">
|
||||
<p>Jquery was heating up, so it was the perfect time to put together a working prototype. I toyed around with some variations, including some horizontal ones. Ultimately, I found the vertical version, similar to the current, the most flexible.</p>
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="milestone"><span>Initial Integrations</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="ncld" class="timeline-event"><a>NCLD-Youth Disability History Timeline</a></dt>
|
||||
<dd class="timeline-event-content" id="ncldEX">
|
||||
<p>The initial working code was first launched at <a href="http://www.ncld-youth.info/index.php?id=61">http://www.ncld-youth.info/index.php?id=61</a>. This version actually has come features that I like that I never implmented in the final plugin (e.g,. century > decade > year/event).</p>
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event -->
|
||||
<dt id="power"><a>Investigating Power's Moments of Truth Timelines</a></dt>
|
||||
<dd class="timeline-event-content" id="powerEX">
|
||||
<p>I really started to fine tune the code for InvestigatingPower.org. This was also the first time where all of the content was loaded via the <abbr title="content management system">CMS</abbr>, which was important given five timelines for a total of a few hundred data points.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="milestone"><span>Open Sourced</span></h2>
|
||||
<dl class="timeline-series">
|
||||
<dt id="github" class="timeline-event"><a>GitHub Gets the Timeliner.js Jquery Plugin</a></dt>
|
||||
<dd class="timeline-event-content" id="githubEX">
|
||||
<p>I wanted to play around with GitHub. I wanted to learn some more Jquery, in particular a bit more about creating a plugin. Done.</p>
|
||||
|
||||
<br class="clear">
|
||||
</dd><!-- /.timeline-event-content -->
|
||||
</dl><!-- /.timeline-series -->
|
||||
</div><!-- /.timeline-wrapper -->
|
||||
|
||||
<br class="clear">
|
||||
</div>
|
||||
|
||||
</div><!-- /.container -->
|
||||
|
||||
<div class="container">
|
||||
<a href="https://investigatingpower.org"><img src="https://investigatingpower.org/wp-content/themes/investigatingpower/img/logo-investigatingpower-1x.png" width="940" alt="Investigating Power" /></a>
|
||||
</div>><!-- /.container -->
|
||||
|
||||
<!-- GLOBAL CORE SCRIPTS -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="inc/colorbox.js"></script>
|
||||
<script type="text/javascript" src="js/timeliner.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$.timeliner({});
|
||||
$.timeliner({
|
||||
timelineContainer: '#timeline-js',
|
||||
timelineSectionMarker: '.milestone',
|
||||
oneOpen: true,
|
||||
startState: 'flat',
|
||||
expandAllText: '+ Show All',
|
||||
collapseAllText: '- Hide All'
|
||||
});
|
||||
// Colorbox Modal
|
||||
$(".CBmodal").colorbox({inline:true, initialWidth:100, maxWidth:682, initialHeight:100, transition:"elastic",speed:750});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,119 +1,199 @@
|
||||
<div class="uk-layui-form">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">基本信息</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">获得时间：</label>
|
||||
<div class="layui-input-inline">
|
||||
<#if contacts.touchtime??>${contacts.touchtime?string('yyyy-MM-dd')}</#if>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline uckefu-inline">
|
||||
<label class="layui-form-label" >类型：</label>
|
||||
<div class="layui-input-inline">
|
||||
${uKeFuDic[contacts.ckind!''].name!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">共享联系人：</label>
|
||||
<div class="layui-input-inline" style="width:auto;">
|
||||
<#if contacts?? && contacts.shares?? && contacts.shares == 'none'>
|
||||
不共享（仅创建人和直属上级可见）
|
||||
<#elseif contacts?? && contacts.shares?? && contacts.shares == 'all'>
|
||||
所有人
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">联系人信息</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="cusname">联系人名称：</label>
|
||||
<div class="layui-input-inline">
|
||||
${contacts.name!''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">性别：</label>
|
||||
<div class="layui-input-inline">
|
||||
<#if contacts.gender?? && contacts.gender == '1'>男</#if>
|
||||
<#if contacts.gender?? && contacts.gender == '0'>女</#if>
|
||||
<#if contacts.gender?? && contacts.gender == '-1'>未知</#if>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline uckefu-inline">
|
||||
<label class="layui-form-label">生日：</label>
|
||||
<div class="layui-input-inline">
|
||||
${contacts.birthday!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">联系电话：</label>
|
||||
<div class="layui-input-inline ukefu-phone-number">
|
||||
${contacts.phone!''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline uckefu-inline">
|
||||
<label class="layui-form-label">手机号：</label>
|
||||
<div class="layui-input-inline ukefu-phone-number">
|
||||
${contacts.mobileno!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">城市：</label>
|
||||
<div class="layui-input-inline" style="width:80px;">
|
||||
${uKeFuDic[contacts.province!''].name!''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-inline" style="width:80px;" id="contacts_city">
|
||||
${uKeFuDic[contacts.city!''].name!''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline uckefu-inline">
|
||||
<label class="layui-form-label">电子邮件：</label>
|
||||
<div class="layui-input-inline" style="margin-left:5px;">
|
||||
${contacts.email!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">联系人地址：</label>
|
||||
<div class="layui-input-inline" style="width: 664px;">
|
||||
${contacts.address!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">联系人说明：</label>
|
||||
<div class="layui-input-inline" style="width: 664px;">
|
||||
${contacts.memo!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-side layui-bg-black">
|
||||
<div class="layui-side-scroll">
|
||||
<#include "/apps/business/contacts/include/left.html">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="/js/timeliner/css/timeliner.css" type="text/css" media="screen">
|
||||
<style>
|
||||
.timeline-wrapper h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.timeline-series dt a {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="/js/jquery-3.1.0.min.js"></script>
|
||||
<script type="text/javascript" src="/js/timeliner/js/timeliner.min.js"></script>
|
||||
|
||||
<div class="layui-body">
|
||||
<div class="layui-side-scroll">
|
||||
<div class="box-header">
|
||||
<h1 class="site-h1" style="background-color:#FFFFFF;">
|
||||
<span class="ukefu-bt">
|
||||
<i class="layui-icon ukewo-btn" style="font-size:20px;text-align: center;"></i>
|
||||
联系人详情
|
||||
</span>
|
||||
</h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="box-body ukefu-im-theme">
|
||||
<div class="uk-layui-form">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">基本信息</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">获得时间：</label>
|
||||
<div class="layui-input-inline" style="line-height: 2.5em;">
|
||||
<#if contacts.touchtime??>${contacts.touchtime?string('yyyy-MM-dd')}</#if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">类型：</label>
|
||||
<div class="layui-input-inline" style="line-height: 2.5em;">
|
||||
${uKeFuDic[contacts.ckind!''].name!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">共享联系人：</label>
|
||||
<div class="layui-input-inline" style="width:auto; line-height: 2.5em;">
|
||||
<#if contacts?? && contacts.shares?? && contacts.shares == 'none'>
|
||||
不共享（仅创建人和直属上级可见）
|
||||
<#elseif contacts?? && contacts.shares?? && contacts.shares == 'all'>
|
||||
所有人
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">联系人信息</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" id="cusname">联系人名称：</label>
|
||||
<div class="layui-input-inline" style="line-height: 2.5em;">
|
||||
${contacts.name!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">性别：</label>
|
||||
<div class="layui-input-inline" style="line-height: 2.5em;">
|
||||
<#if contacts.gender?? && contacts.gender == '1'>男</#if>
|
||||
<#if contacts.gender?? && contacts.gender == '0'>女</#if>
|
||||
<#if contacts.gender?? && contacts.gender == '-1'>未知</#if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">生日：</label>
|
||||
<div class="layui-input-inline" style="line-height: 2.5em;">
|
||||
${contacts.birthday!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">联系电话：</label>
|
||||
<div class="layui-input-inline" style="line-height: 2.5em;">
|
||||
${contacts.phone!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">手机号：</label>
|
||||
<div class="layui-input-inline" style="line-height: 2.5em;">
|
||||
${contacts.mobileno!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">城市：</label>
|
||||
<div class="layui-input-inline" style="width:80px;line-height: 2.5em;">
|
||||
${uKeFuDic[contacts.province!''].name!''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-inline" style="width:80px; line-height: 2.5em;" id="contacts_city">
|
||||
${uKeFuDic[contacts.city!''].name!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">电子邮件：</label>
|
||||
<div class="layui-input-inline" style="margin-left:5px;line-height: 2.5em;">
|
||||
${contacts.email!''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">联系人地址：</label>
|
||||
<div class="layui-input-inline" style="width: 159%;">
|
||||
<input type="text" name="address" readonly value="${contacts.address!''}" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">联系人说明：</label>
|
||||
<div class="layui-input-inline" style="width: 149%;">
|
||||
<textarea name="memo" class="layui-textarea" readonly>${contacts.memo!''}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
笔记
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6" style="padding-left: 10px;">
|
||||
<h2 class="layui-colla-title">往来历史</h2>
|
||||
<div id="timeline" class="timeline-container">
|
||||
<div class="timeline-wrapper">
|
||||
<h2 class="timeline-time">2018-09-06 21:51:36</h2>
|
||||
|
||||
<dl class="timeline-series">
|
||||
|
||||
<dt class="timeline-event" id="event01"><a>外呼</a></dt>
|
||||
<dd class="timeline-event-content" id="event01EX">
|
||||
<p>记录者：系统管理员</p>
|
||||
<p>内容：Content about the event goes here.Content about the event goes here.Content about the event goes here.Content about the event goes here.Content about the event goes here.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="timeline-event" id="event02"><a>呼入</a></dt>
|
||||
<dd class="timeline-event-content" id="event02EX">
|
||||
<p>记录者：张凯</p>
|
||||
<p>内容：Content about the other event.</p>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<br class="clear">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$.timeliner({
|
||||
fontOpen: '0.7em',
|
||||
fontClosed: '0.7em',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -40,14 +40,14 @@
|
||||
<#if user?? && (user.roleAuthMap["A02_A01_A02_B08"]?? || user.usertype == "0") >
|
||||
<div class="layui-btn-group ukefu-btn-group">
|
||||
<button class="layui-btn layui-btn-small" href="/apps/contacts/imp.html<#if ckind??>?ckind=${ckind}</#if>" title="导入联系人" data-toggle="ajax" data-width="950" data-height="600">
|
||||
<i class="kfont"></i> 导入
|
||||
<i class="kfont"></i> 导入
|
||||
</button>
|
||||
</div>
|
||||
</#if>
|
||||
<#if user?? && (user.roleAuthMap["A02_A01_A02_B09"]?? || user.usertype == "0") >
|
||||
<div class="layui-btn-group ukefu-btn-group">
|
||||
<button class="layui-btn layui-btn-small dropdown-menu">
|
||||
<i class="kfont"></i> 导出
|
||||
<i class="kfont"></i> 导出
|
||||
<i class="layui-icon"></i>
|
||||
</button>
|
||||
<ul class="ukefu-dropdown-menu layui-anim layui-anim-upbit">
|
||||
@ -98,15 +98,15 @@
|
||||
<input type="checkbox" class="ids" name="ids" value="${contacts.id!''}"/>
|
||||
</td>
|
||||
<td class=" first_td_head">
|
||||
${contacts.name!''}
|
||||
<a href="/apps/contacts/detail.html?id=${contacts.id!''}">${contacts.name!''}</a>
|
||||
</td>
|
||||
<td>
|
||||
<span class="ukefu-phone-number">
|
||||
${contacts.mobileno!''}
|
||||
${contacts.mobileno!''}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
${contacts.email!''}
|
||||
${contacts.email!''}
|
||||
</td>
|
||||
<td>
|
||||
<#if contacts.gender?? && contacts.gender == '1'>男</#if>
|
||||
@ -117,7 +117,7 @@
|
||||
${contacts.cusbirthday!''}
|
||||
</td>
|
||||
<td>
|
||||
${uKeFuDic[contacts.ckind!''].name!''}
|
||||
${uKeFuDic[contacts.ckind!''].name!''}
|
||||
</td>
|
||||
<td>
|
||||
<#if contacts.user??>${contacts.user.username!''}</#if>
|
||||
@ -178,15 +178,15 @@
|
||||
top.layer.alert("请先选择需要导出的联系人信息");
|
||||
$('#batexp').attr("href" , "javascript:void(0)");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
layui.use(['laypage', 'layer'], function(){
|
||||
var laypage = layui.laypage
|
||||
,layer = layui.layer;
|
||||
|
||||
|
||||
laypage({
|
||||
cont: 'page'
|
||||
,pages: <#if contactsList??>${contactsList.totalPages}<#else>0</#if> //总页数
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user