frontend widget plus show page fix

This commit is contained in:
rulingcom 2015-06-03 17:38:31 +08:00
parent a7a91c4be6
commit 177df2738b
5 changed files with 681 additions and 542 deletions

View File

@ -232,7 +232,7 @@ var AgendaView = function(calendar){
'</div>' + '</div>' +
'</div>'; '</div>';
var event_list_template = '<div class="col-md-8">' + var event_list_template = '<div class="col-md-8 agenda-event">' +
'<table class="table table-condensed table-bordered event_list">' + '<table class="table table-condensed table-bordered event_list">' +
'<thead>' + '<thead>' +
'<tr>' + '<tr>' +
@ -256,7 +256,7 @@ var AgendaView = function(calendar){
'<label>To</label>' + '<label>To</label>' +
'<select name="end_month" class="form-control input-sm" />' + '<select name="end_month" class="form-control input-sm" />' +
'<select name="end_year" class="form-control input-sm" />' + '<select name="end_year" class="form-control input-sm" />' +
'<button id="show_events" class="btn btn-sm bt-filter">Show Events</button>' + '<button id="show_events" class="btn btn-sm bt-filter btn-primary">Show Events</button>' +
'</div>'; '</div>';
var event_template = '<tr>' + var event_template = '<tr>' +
@ -407,6 +407,8 @@ var AgendaView = function(calendar){
if($(this).find("tr").length > 1) if($(this).find("tr").length > 1)
$(this).find("td.no_events").parent().remove(); $(this).find("td.no_events").parent().remove();
}) })
// nano scroller here
} }
}) })
var eventDom = function(event){ var eventDom = function(event){

View File

@ -1,9 +1,10 @@
var CalendarModuleMonth = function(date,dom,subpart){ var CalendarModuleMonth = function(date,dom,subpart,url){
_this = this; _this = this;
var template = dom.find(".month_template"), var template = dom.find(".month_template"),
monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'], monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
initialDate = date, initialDate = date,
subpartid = subpart, subpartid = subpart,
index_url = url,
fetchInterval = null, fetchInterval = null,
month = date.getMonth(), month = date.getMonth(),
year = date.getFullYear(), year = date.getFullYear(),
@ -127,6 +128,11 @@
var dt = inserting_date + "-" + month + "-" + year, var dt = inserting_date + "-" + month + "-" + year,
td = dom.find("td[data-date-node=" + dt + "]"); td = dom.find("td[data-date-node=" + dt + "]");
td.addClass("w-calendar-event"); td.addClass("w-calendar-event");
if(index_url != ""){
td.on("click",function(){
window.location.href = "http://" + window.location.host + index_url;
})
}
inserting_date++; inserting_date++;
if(inserting_date > lastDay.getDate() || (ed.getMonth() == month && inserting_date > ed.getDate())){ if(inserting_date > lastDay.getDate() || (ed.getMonth() == month && inserting_date > ed.getDate())){
break; break;

View File

@ -3,96 +3,121 @@
transition: all 0.3s ease; transition: all 0.3s ease;
-webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
.cal-fn { .cal-fn {
position: relative; position: relative;
} }
#sec1 { #sec1 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
.internal-page & { .internal-page & {
float: left; float: left;
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
float: none; float: none;
} }
.btn-toolbar { .btn-toolbar {
margin-left: 0; margin-left: 0;
margin-right: 15px;
} }
.form-inline { .form-inline {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
float: none; float: none;
} }
} }
#sec2 { #sec2 {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
text-align: center; text-align: center;
.current_day_title { .current_day_title {
width: 100%; width: 100%;
line-height: 28px; line-height: 28px;
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
position: absolute; position: absolute;
top: 0; top: 0;
.current_day_title { .current_day_title {
margin: 0; margin: 0;
text-align: right; text-align: right;
} }
} }
@media screen and (max-width: 479px) { @media screen and (max-width: 479px) {
position: static; position: static;
.current_day_title { .current_day_title {
text-align: center; text-align: center;
} }
} }
} }
#sec3 { #sec3 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
float: left;
.internal-page & { .internal-page & {
.calendar_mode { .calendar_mode {
float: none; float: none;
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
float: none; float: none;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
float: none; float: none;
} }
} }
#range_selection { #range_selection {
margin-top: 10px; margin-top: 10px;
margin-right: 5px; margin-right: 5px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 12px; font-size: 12px;
& > * { & > * {
margin: 0 5px; margin: 0 5px;
} }
@media screen and (max-width: 479px) { @media screen and (max-width: 479px) {
margin-right: 0; margin-right: 0;
& > * { & > * {
margin: 0; margin: 0;
} }
& > label, & > label,
#show_events { #show_events {
display: block; display: block;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
& > select { & > select {
display: block; display: block;
width: 100%; width: 100%;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
& > select { & > select {
.internal-page & { .internal-page & {
@ -101,14 +126,17 @@
} }
} }
} }
.fc-view { .fc-view {
font-size: 1em; font-size: 1em;
background-color: #fff; background-color: #fff;
} }
} }
#view_holder { #view_holder {
clear: both; clear: both;
} }
.calendar_color_tag { .calendar_color_tag {
display: inline-block; display: inline-block;
width: 18px; width: 18px;
@ -116,15 +144,19 @@
margin-right: 4px; margin-right: 4px;
vertical-align: bottom; vertical-align: bottom;
} }
.calendar_mode { .calendar_mode {
z-index: 2; z-index: 2;
} }
.mode_switch { .mode_switch {
text-transform: capitalize; text-transform: capitalize;
} }
.today { .today {
background-color: #D9EDF7; background-color: #D9EDF7;
} }
.event { .event {
font-size: 12px; font-size: 12px;
border-radius: 3px; border-radius: 3px;
@ -135,9 +167,11 @@
-webkit-box-shadow: inset 0 0 1px black; -webkit-box-shadow: inset 0 0 1px black;
-moz-box-shadow: inset 0 0 1px black; -moz-box-shadow: inset 0 0 1px black;
} }
.modal-body { .modal-body {
max-height: 400px; max-height: 400px;
} }
.event_list_wrapper { .event_list_wrapper {
position: relative; position: relative;
} }
@ -148,11 +182,13 @@
border: solid 1px #ddd; border: solid 1px #ddd;
border-top: 0; border-top: 0;
} }
.divide { .divide {
height: 19px; height: 19px;
margin-bottom: 18px; margin-bottom: 18px;
border-bottom: solid 1px #eee; border-bottom: solid 1px #eee;
} }
.day_time { .day_time {
height: 31px; height: 31px;
border-bottom: solid 1px #ddd; border-bottom: solid 1px #ddd;
@ -167,9 +203,11 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
dl { dl {
padding: 3px; padding: 3px;
} }
dt { dt {
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
@ -186,25 +224,32 @@
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
.header { .header {
margin-bottom: 10px; margin-bottom: 10px;
} }
.header th { .header th {
text-align: center; text-align: center;
} }
td { td {
border: 0; border: 0;
} }
.event { .event {
margin-bottom: 2px; margin-bottom: 2px;
} }
.all_day_event { .all_day_event {
background: #eee; background: #eee;
border: solid 1px #ddd; border: solid 1px #ddd;
} }
.event_list .table { .event_list .table {
border-top: solid 1px #ddd; border-top: solid 1px #ddd;
} }
.event_list td { .event_list td {
padding: 0; padding: 0;
} }
@ -215,14 +260,14 @@
position: relative; position: relative;
margin: 0 16px 0 2px; margin: 0 16px 0 2px;
} }
.event { .event {
padding: 0px; padding: 0px;
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
.event.half { .event.half {}
}
.event.over { .event.over {
border: solid 1px #fff; border: solid 1px #fff;
} }
@ -231,67 +276,82 @@
/* month view */ /* month view */
#calendar_month { #calendar_month {
border-bottom: solid 1px #ddd; border-bottom: solid 1px #ddd;
.month_row { .month_row {
position: relative; position: relative;
border: solid 1px #ddd; border: solid 1px #ddd;
border-bottom: 0; border-bottom: 0;
height: 60px; height: 60px;
overflow: hidden; overflow: hidden;
&.header { &.header {
height: 28px; height: 28px;
border: 0; border: 0;
th { th {
font-size: 12px; font-size: 12px;
padding: 4px; padding: 4px;
border: 0; border: 0;
} }
} }
.table { .table {
table-layout: fixed; table-layout: fixed;
margin-bottom: 0; margin-bottom: 0;
width: 100%; width: 100%;
position: absolute; position: absolute;
td { td {
border: 0; border: 0;
border-left: solid 1px #ddd; border-left: solid 1px #ddd;
padding: 2px 4px 0 4px; padding: 2px 4px 0 4px;
&.today { &.today {
border-bottom: solid 1px #fff; border-bottom: solid 1px #fff;
border-top: solid 1px #fff; border-top: solid 1px #fff;
} }
&.disable { &.disable {
background-color: #f6f6f6; background-color: #f6f6f6;
color: #ccc; color: #ccc;
border-left: solid 1px #ddd; border-left: solid 1px #ddd;
} }
&:first-child { &:first-child {
border-left: 0; border-left: 0;
} }
} }
} }
.month_table { .month_table {
height: 100%; height: 100%;
} }
.month_date { .month_date {
color: #666; color: #666;
font-size: 11px; font-size: 11px;
cursor: pointer; cursor: pointer;
td { td {
border-left: 0 border-left: 0;
} }
.day_title:hover { .day_title:hover {
text-decoration: underline; text-decoration: underline;
} }
.event:hover { .event:hover {
text-decoration: none !important; text-decoration: none !important;
} }
} }
.event { .event {
margin: 0 -2px; margin: 0 -2px;
position: relative; position: relative;
color: #000; color: #000;
} }
} }
.event.single { .event.single {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
@ -303,43 +363,53 @@
#calendar_agenda { #calendar_agenda {
margin-top: 20px; margin-top: 20px;
font-size: 12px; font-size: 12px;
> .row {
margin-bottom: 30px;
}
.table { .table {
margin-bottom: 0; margin-bottom: 0;
background-color: #fff; background-color: #fff;
} }
.tiny_calendar { .tiny_calendar {
.table { .table {
th { th {
text-align: center; text-align: center;
border-top: 0; border-top: 0;
} }
td { td {
text-align: center; text-align: center;
} }
} }
} }
.event { .event {
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.row-fluid { .row-fluid {
margin-top: 20px; margin-top: 20px;
padding-top: 20px; padding-top: 20px;
border-top: dashed 1px #ddd; border-top: dashed 1px #ddd;
&:first-child { &:first-child {
border-top: 0; border-top: 0;
padding-top: 0; padding-top: 0;
margin-top: 0; margin-top: 0;
} }
} }
.table.event_list {
margin-top: 40px;
}
} }
.event_time { .event_time {
font-family: Tahoma, sans-serif; font-family: Tahoma, sans-serif;
} }
.has_event { .has_event {
background-color: #08c; background-color: #08c;
color: #fff; color: #fff;
@ -351,86 +421,102 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
td { td {
padding: 0; padding: 0;
} }
.table { .table {
margin-bottom: 0; margin-bottom: 0;
} }
.header { .header {
margin-bottom: 12px; margin-bottom: 12px;
border-top: 0; border-top: 0;
table-layout: fixed; table-layout: fixed;
} }
.header { .header {
th { th {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
} }
td { td {
border: solid 1px #ddd; border: solid 1px #ddd;
/*background-color: #eee;*/ /*background-color: #eee;*/
} }
} }
.week_day { .week_day {
padding: 0 2px; padding: 0 2px;
border: solid 1px #ddd; border: solid 1px #ddd;
} }
.header .week_day { .header .week_day {
padding: 2px 4px 0px 2px; padding: 2px 4px 0px 2px;
} }
.event_list .event { .event_list .event {
position: absolute; position: absolute;
width: 100%; width: 100%;
margin-bottom: 2px; margin-bottom: 2px;
} }
.cell_map { .cell_map {
margin-bottom: 18px; margin-bottom: 18px;
td { td {
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
} }
tr:first-child td { tr:first-child td {
border-top: solid 1px #ddd; border-top: solid 1px #ddd;
} }
} }
.event_holder .inner { .event_holder .inner {
margin: 0 8px 0 0; margin: 0 8px 0 0;
} }
.all_day_event_holder { .all_day_event_holder {
position: relative; position: relative;
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
} }
.all_day_event_holder td { .all_day_event_holder td {
border: 0; border: 0;
background-color: transparent; background-color: transparent;
} }
.all_day_event { .all_day_event {
background: #eee; background: #eee;
} }
} }
/* calendars(category) */ /* calendars(category) */
.calendars_color_tag { .calendars_color_tag {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
} }
/* Event Controller */ /* Event Controller */
.event_controller { .event_controller {
.form-horizontal { .form-horizontal {
margin-bottom: 0; margin-bottom: 0;
.control-label { .control-label {
width: 60px; width: 60px;
} }
.controls { .controls {
margin-left: 80px; margin-left: 80px;
input[type="text"], input[type="text"],
select, select,
textarea, textarea,
@ -442,9 +528,11 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
input[type="checkbox"] { input[type="checkbox"] {
margin-top: 0; margin-top: 0;
} }
textarea { textarea {
height: auto; height: auto;
line-height: 1em; line-height: 1em;
@ -452,11 +540,14 @@
} }
} }
} }
.last { .last {
margin-bottom: 0; margin-bottom: 0;
} }
.row-fluid { .row-fluid {
margin-bottom: 6px; margin-bottom: 6px;
.control-label { .control-label {
line-height: 30px; line-height: 30px;
} }
@ -476,6 +567,7 @@
margin-left: 10px; margin-left: 10px;
border-color: #f1f1f1; border-color: #f1f1f1;
} }
.miniColors-selector { .miniColors-selector {
float: none; float: none;
margin: 4px 0 0 0; margin: 4px 0 0 0;
@ -485,6 +577,7 @@
.edit_cal { .edit_cal {
margin: -8px; margin: -8px;
background-color: whitesmoke; background-color: whitesmoke;
.table, .table,
.table td { .table td {
border: 0 !important; border: 0 !important;
@ -492,6 +585,7 @@
margin: 0 !important; margin: 0 !important;
} }
} }
.main-list td { .main-list td {
border-top: solid 1px #ddd; border-top: solid 1px #ddd;
} }
@ -506,9 +600,11 @@
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
clear: none; clear: none;
.viewport { .viewport {
height: 170px; height: 170px;
} }
.scrollbar { .scrollbar {
top: 8px; top: 8px;
} }
@ -517,13 +613,16 @@
#tags_list { #tags_list {
padding: 8px; padding: 8px;
} }
.bootstrap-datetimepicker-widget.dropdown-menu { .bootstrap-datetimepicker-widget.dropdown-menu {
z-index: 1051; z-index: 1051;
} }
#main-wrap { #main-wrap {
padding-bottom: 0; padding-bottom: 0;
} }
.fc-other-month{
.fc-other-month {
background-color: #F6F6F6; background-color: #F6F6F6;
} }
@ -535,12 +634,14 @@
height: 120px; height: 120px;
padding: 5px; padding: 5px;
border-radius: 4px; border-radius: 4px;
background-color: rgba(255,255,255,.95); border: 1px solid #dbdbdb;
background-image: url('/assets/loading1.gif'); background-color: rgba(255, 255, 255, 0.95);
background-image: url("/assets/loading1.gif");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center 20px; background-position: center 20px;
background-size: 50%; background-size: 50%;
box-shadow: 0 0 30px -10px #000; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.2);
&:after { &:after {
content: "Loading..."; content: "Loading...";
position: absolute; position: absolute;
@ -551,8 +652,9 @@
text-align: center; text-align: center;
} }
} }
#event_create_space { #event_create_space {
display:none; display: none;
position: fixed; position: fixed;
width: 400px; width: 400px;
margin: 0; margin: 0;
@ -568,24 +670,38 @@
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-moz-background-clip: padding-box; -moz-background-clip: padding-box;
background-clip: padding-box; background-clip: padding-box;
.alert { .alert {
margin-bottom: 0; margin-bottom: 0;
} }
.new_event { .new_event {
margin-bottom: 0; margin-bottom: 0;
} }
.modal-body {
overflow-x: hidden;
padding: 25px 25px 15px 15px;
}
.datetimepick {
> input {
width: 90%;
}
}
} }
.calendar-modal { .calendar-modal {
position: fixed; position: fixed;
z-index: 1050; z-index: 1050;
width: 300px; width: 300px;
margin: 0; margin: 0;
font-size: 12px; font-size: 12px;
& > .modal-content { & > .modal-content {
h3 { h3 {
margin: 0; margin: 0;
} }
} }
.event_summary { .event_summary {
margin-right: -15px; margin-right: -15px;
margin-bottom: 15px; margin-bottom: 15px;
@ -594,14 +710,17 @@
padding-bottom: 15px; padding-bottom: 15px;
padding-left: 15px; padding-left: 15px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
> p { > p {
margin-bottom: 0; margin-bottom: 0;
} }
i { i {
color: #989898; color: #989898;
} }
} }
} }
.calendar-form-actions { .calendar-form-actions {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@ -609,5 +728,14 @@
padding-right: 0; padding-right: 0;
padding-bottom: 0; padding-bottom: 0;
padding-left: 0; padding-left: 0;
}
.agenda-event {
overflow-x: hidden;
overflow-y: auto;
height: 200px;
margin-top: 40px;
@media screen and (max-width: 767px) {
height: auto;
}
} }

View File

@ -13,8 +13,12 @@ class CalendarsController < ApplicationController
def widget def widget
part = OrbitHelper.get_current_widget part = OrbitHelper.get_current_widget
{ {
"extras" => {"subpart-id"=>part.id.to_s} "extras" => {
"subpart-id" => part.id.to_s,
"more_url" => OrbitHelper.widget_more_url
}
} }
end end

View File

@ -6,7 +6,6 @@
<%= stylesheet_link_tag "fullcalendar"%> <%= stylesheet_link_tag "fullcalendar"%>
<%= stylesheet_link_tag "calendar"%> <%= stylesheet_link_tag "calendar"%>
<div id="orbit_calendar" class="month_view"> <div id="orbit_calendar" class="month_view">
<div class="clearfix cal-fn"> <div class="clearfix cal-fn">
<div id='sec2'> <div id='sec2'>