diff --git a/rowers/templates/forcecurve_single.html b/rowers/templates/forcecurve_single.html index c45300c4..e99669c3 100644 --- a/rowers/templates/forcecurve_single.html +++ b/rowers/templates/forcecurve_single.html @@ -1,4 +1,4 @@ -{% extends "base.html" %} +{% extends "newbase.html" %} {% load staticfiles %} {% load rowerfilters %} {% load tz %} @@ -6,7 +6,7 @@ {% block title %} Force Curve Plot {% endblock %} {% localtime on %} -{% block content %} +{% block main %} {{ js_res | safe }} {{ css_res| safe }} @@ -19,54 +19,34 @@ {{ the_script |safe }} +

Empower Force Curve

- - - - - -

 

- - - -
- - {{ the_div|safe }} - -
+ + {% endblock %} {% endlocaltime %} + +{% block sidebar %} +{% include 'menu_workout.html' %} +{% endblock %} diff --git a/rowers/templates/list_workouts.html b/rowers/templates/list_workouts.html index 899e2273..2ba41c61 100644 --- a/rowers/templates/list_workouts.html +++ b/rowers/templates/list_workouts.html @@ -167,7 +167,6 @@ xo Max HR {% if not team %}   -   {% else %} Owner @@ -216,11 +215,7 @@ xo {{ workout.duration |durationprint:"%H:%M:%S.%f" }} {{ workout.averagehr }} {{ workout.maxhr }} - {% if not team %} - - Export - - {% else %} + {% if team %} {{ workout.user.user.first_name }} diff --git a/rowers/templates/menu_workout.html b/rowers/templates/menu_workout.html index c045c36d..b39e243d 100644 --- a/rowers/templates/menu_workout.html +++ b/rowers/templates/menu_workout.html @@ -28,6 +28,14 @@ {% endif %} + {% if user.is_authenticated %} +
  • + +  Comments + ({{ workout|aantalcomments }}) + +
  • + {% endif %}
  •  Statistics @@ -62,6 +70,11 @@  Map
  • +
  • + +  Force Curve + +
  •  OTW Power diff --git a/rowers/templates/workout_comments.html b/rowers/templates/workout_comments.html index 053c7c0d..0a988423 100644 --- a/rowers/templates/workout_comments.html +++ b/rowers/templates/workout_comments.html @@ -1,4 +1,4 @@ -{% extends "base.html" %} +{% extends "newbase.html" %} {% load staticfiles %} {% load rowerfilters %} {% load tz %} @@ -7,19 +7,13 @@ {% include "monitorjobs.html" %} {% endblock %} -{% block title %}Change Workout {% endblock %} +{% block title %}Comment Workout {% endblock %} -{% block content %} -
    -
    - {% if form.errors %} -

    - Please correct the error{{ form.errors|pluralize }} below. -

    - {% endif %} - -

    Comments {{ workout.name }}

    +{% block main %} +

    Comments {{ workout.name }}

    +
    - {% for c in comments %} -
    -
    - {{ c.created }} - {{ c.user.first_name }} {{ c.user.last_name }} -
    -
    -
    -
    - {{ c.comment }} -
    +
  • +
  • + {% for c in comments %} + {{ c.created }} + {{ c.user.first_name }} {{ c.user.last_name }} +
    +
    + {{ c.comment }}
    - {% endfor %} - -
    {{ form.as_table }}
    {% csrf_token %} -
    - -
    +
    -
    - - - -
    -

    Images linked to this workout

    - - {% if graphs1 %} - - {% for graph in graphs1 %} - {% if forloop.counter == 1 %} -
    +
  • + {% for graph in graphs %} +
  • - {{ graph.filename }} - - {% elif forloop.counter == 3 %} -
    - - {{ graph.filename }} -
    - - {% else %} -
    - - {{ graph.filename }} -
    - {% endif %} + {{ graph.filename }} + +
  • {% endfor %} - - {% for graph in graphs2 %} - {% if forloop.counter == 1 %} -
    - - {{ graph.filename }} -
    - {% elif forloop.counter == 3 %} -
    - - {{ graph.filename }} -
    - - {% else %} -
    - - {{ graph.filename }} -
    - {% endif %} - {% endfor %} - - - +
  • +

    Workout Summary

    + +

    +

    +        {{ workout.summary }}
    +      
    +

    + +
  • - {% else %} -

    No graphs found

    - {% endif %} - - - - -
    -

    Workout Summary

    +
  • + + -

    -

    -      {{ workout.summary }}
    -    
    -

    + {{ gmscript |safe }} -
  • - - - -
    - - - - {{ gmscript |safe }} - - -
    - {{ gmdiv|safe }} -
    -
    +
    + {{ gmdiv|safe }} +
    + + {% endblock %} + +{% block sidebar %} +{% include 'menu_workout.html' %} +{% endblock %} diff --git a/rowers/templates/workout_form.html b/rowers/templates/workout_form.html index 9cdb027c..c59810a9 100644 --- a/rowers/templates/workout_form.html +++ b/rowers/templates/workout_form.html @@ -1,4 +1,4 @@ -{% extends "base.html" %} +{% extends "newbase.html" %} {% load staticfiles %} {% load rowerfilters %} {% load tz %} @@ -42,261 +42,105 @@ $('#id_workouttype').change(); {% endblock %} -{% block content %} -
    +{% block main %} - {% if form.errors %} -

    - Please correct the error{{ form.errors|pluralize }} below. -

    - {% endif %} - -

    Edit Workout {{ workout.name }}

    -
    -
    -

    - Delete -

    -
    -
    -

    - Export - -

    -
    -
    -

    - Advanced -

    - Advanced Functionality (More interactive Charts) - -
    -
    -
    -
    -

    - Workflow View -

    -
    -
    -

    - Map View -

    -
    -
    -

    - Statistics -

    -
    -
    -
    - - - {% localtime on %} - {% if workout.user.user != user %} +

    Edit Workout {{ workout.name }}

    +
    + + {% localtime on %} + {% if workout.user.user != user %} - - {% endif %} - -{% endlocaltime %} - - - - - - - - - - - - - - -
    Rower:{{ rower.user.first_name }} {{ rower.user.last_name }}
    Date/Time:{{ workout.startdatetime|localtime}}
    Distance:{{ workout.distance }}m
    Duration:{{ workout.duration |durationprint:"%H:%M:%S.%f" }}
    Public link to this workout - https://rowsandall.com/rowers/workout/{{ workout.id }} -
    Comments - Comment ({{ aantalcomments }}) -
    Public link to interactive chart - https://rowsandall.com/rowers/workout/{{ workout.id }}/interactiveplot - -
    -
    -
    + + {% endif %} + Date/Time:{{ workout.startdatetime|localtime}} + {% endlocaltime %} + + Distance:{{ workout.distance }}m + + Duration:{{ workout.duration |durationprint:"%H:%M:%S.%f" }} + + Public link to this workout + + https://rowsandall.com/rowers/workout/{{ workout.id }} + + + + +
  • + {% if form.errors %} +

    + Please correct the error{{ form.errors|pluralize }} below. +

    + {% endif %} + +
    - - {{ form.as_table }} -
    - {% csrf_token %} -
    + + {{ form.as_table }} +
    + {% csrf_token %} -
    -
    -
  • -
    -
    -

    Images linked to this workout

    -
    -
    -

    - Add Time Plot -

    -
    - - -
    -
    -

    - Attach Image -

    -
    -
    -

    - Power Pie Chart -

    -
    -
    -

    Generating images takes roughly 1 second per minute - of your workout's duration. Please reload after a minute or so.

    -
    -
    - {% if graphs1 %} + + +
  • - {% for graph in graphs1 %} - {% if forloop.counter == 1 %} -
    - - {{ graph.filename }} -
    - {% elif forloop.counter == 3 %} -
    - - {{ graph.filename }} -
    +

    Workout Summary

    - {% else %} -
    - - {{ graph.filename }} -
    - {% endif %} - {% endfor %} - - - {% for graph in graphs2 %} - {% if forloop.counter == 1 %} -
    - - {{ graph.filename }} -
    - {% elif forloop.counter == 3 %} -
    - - {{ graph.filename }} -
    - - {% else %} -
    - - {{ graph.filename }} -
    - {% endif %} - {% endfor %} - - - - - {% else %} -

    No graphs found

    - {% endif %} -
  • - - - -
    -
    -

    Workout Summary

    - -

    -

    -          {{ workout.summary }}
    -        
    -

    -
    -

    - Update Summary -

    -
    -
    -
    -
    - -
    -
    -

     

    - -
    -
    -
    - - - -
    +

    +

    +        {{ workout.summary }}
    +      
    +

    +

    + Update Summary +

    + + {% if mapdiv %} +
  • - - +
    {{ mapdiv|safe }} - +
    {{ mapscript|safe }} -
  • -
    + + {% endif %} + {% for graph in graphs %} +
  • + + {{ graph.filename }} + +
  • + {% endfor %} + {% endblock %} + +{% block sidebar %} +{% include 'menu_workout.html' %} +{% endblock %} diff --git a/rowers/templatetags/rowerfilters.py b/rowers/templatetags/rowerfilters.py index 6a8289c0..30a23bc7 100644 --- a/rowers/templatetags/rowerfilters.py +++ b/rowers/templatetags/rowerfilters.py @@ -8,7 +8,7 @@ import datetime import re register = template.Library() from rowers.utils import calculate_age -from rowers.models import course_length +from rowers.models import course_length,WorkoutComment from rowers.plannedsessions import ( race_can_register, race_can_submit,race_rower_status ) @@ -55,6 +55,14 @@ def secondstotimestring(tdelta): return res +@register.filter +def aantalcomments(workout): + comments = WorkoutComment.objects.filter(workout=workout) + + aantalcomments = len(comments) + + return aantalcomments + @register.filter def water(workout): try: diff --git a/rowers/urls.py b/rowers/urls.py index ac80f4a7..e7b87ba1 100644 --- a/rowers/urls.py +++ b/rowers/urls.py @@ -226,7 +226,7 @@ urlpatterns = [ url(r'^workout/(?P\d+)/task$',views.workout_test_task_view), url(r'^workout/(?P\d+)/forcecurve$',views.workout_forcecurve_view), url(r'^workout/(?P\d+)/unsubscribe$',views.workout_unsubscribe_view), - url(r'^workout/(?P\d+)/export$',views.workout_export_view), +# url(r'^workout/(?P\d+)/export$',views.workout_export_view), url(r'^workout/(?P\d+)/comment$',views.workout_comment_view), url(r'^workout/(?P\d+)/emailtcx$',views.workout_tcxemail_view), url(r'^workout/(?P\d+)/emailgpx$',views.workout_gpxemail_view), @@ -328,8 +328,7 @@ urlpatterns = [ url(r'^workout/(?P\d+)/underarmouruploadw/$',views.workout_underarmour_upload_view), url(r'^workout/(?P\d+)/tpuploadw/$',views.workout_tp_upload_view), url(r'^multi-compare$',views.multi_compare_view), - url(r'^user-boxplot/(?P\d+)$',views.boxplot_view), - url(r'^user-boxplot/$',views.boxplot_view), + url(r'^user-boxplot/user/(?P\d+)$',views.boxplot_view), url(r'^user-boxplot$',views.boxplot_view), url(r'^user-boxplot-data$',views.boxplot_view_data), url(r'^user-multiflex/(?P\d+)$',views.multiflex_view), diff --git a/rowers/views.py b/rowers/views.py index e86ec07f..d2179531 100644 --- a/rowers/views.py +++ b/rowers/views.py @@ -2830,10 +2830,32 @@ def workout_forcecurve_view(request,id=0,workstrokesonly=False): script,div,js_resources,css_resources = interactive_forcecurve([row], workstrokesonly=workstrokesonly) + breadcrumbs = [ + { + 'url':'/rowers/list-workouts', + 'name':'Workouts' + }, + { + 'url':get_workout_default_page(request,id), + 'name': str(row.id) + }, + { + 'url':reverse(workout_forcecurve_view,kwargs={'id':id}), + 'name': 'Empower Force Curve' + } + + ] + + r = getrower(request.user) + return render(request, 'forcecurve_single.html', { 'the_script':script, + 'rower':r, + 'workout':row, + 'breadcrumbs':breadcrumbs, + 'active':'nav-workouts', 'the_div':div, 'js_res': js_resources, 'css_res':css_resources, @@ -8823,7 +8845,7 @@ def workout_unsubscribe_view(request,id=0): @login_required() def workout_comment_view(request,id=0): w = get_workout(id) - + if w.privacy == 'private' and w.user.user != request.user: return HttpResponseForbidden("Permission error") @@ -8903,26 +8925,36 @@ def workout_comment_view(request,id=0): except: pass + rower = getrower(request.user) - if (len(g)<=3): - return render(request, - 'workout_comments.html', - {'workout':w, - 'teams':get_my_teams(request.user), - 'graphs1':g[0:3], - 'comments':comments, - 'form':form, - }) - else: - return render(request, - 'workout_comments.html', - {'workout':w, - 'teams':get_my_teams(request.user), - 'graphs1':g[0:3], - 'graphs1':g[3:6], - 'comments':comments, - 'form':form, - }) + breadcrumbs = [ + { + 'url':'/rowers/list-workouts', + 'name':'Workouts' + }, + { + 'url':get_workout_default_page(request,id), + 'name': str(w.id) + }, + { + 'url':reverse(workout_comment_view,kwargs={'id':id}), + 'name': 'Comments' + } + + ] + + + return render(request, + 'workout_comments.html', + {'workout':w, + 'rower':rower, + 'breadcrumbs':breadcrumbs, + 'active':'nav-workouts', + 'teams':get_my_teams(request.user), + 'graphs':g, + 'comments':comments, + 'form':form, + }) # for ajax calls def course_map_view(request,id=0): @@ -9083,6 +9115,9 @@ def workout_edit_view(request,id=0,message="",successmessage=""): row = get_workout(id) + if (checkworkoutuser(request.user,row)==False): + raise PermissionDenied("Access denied") + form = WorkoutForm(instance=row) if request.method == 'POST': @@ -9142,50 +9177,43 @@ def workout_edit_view(request,id=0,message="",successmessage=""): thetimezone = 'UTC' - # check if user is owner of this workout - if checkworkoutuser(request.user,row): - row.name = name - row.date = date - row.starttime = starttime - row.startdatetime = startdatetime - row.workouttype = workouttype - row.weightcategory = weightcategory - row.notes = notes - row.duration = duration - row.distance = distance - row.boattype = boattype - row.privacy = privacy - row.rankingpiece = rankingpiece - row.timezone = thetimezone - try: - row.save() - except IntegrityError: - pass - # change data in csv file - r = rdata(row.csvfilename) - if r == 0: - return HttpResponse("Error: CSV Data File Not Found") - r.rowdatetime = startdatetime - r.write_csv(row.csvfilename,gzip=True) - dataprep.update_strokedata(id,r.df) - successmessage = "Changes saved" + row.name = name + row.date = date + row.starttime = starttime + row.startdatetime = startdatetime + row.workouttype = workouttype + row.weightcategory = weightcategory + row.notes = notes + row.duration = duration + row.distance = distance + row.boattype = boattype + row.privacy = privacy + row.rankingpiece = rankingpiece + row.timezone = thetimezone + try: + row.save() + except IntegrityError: + pass + # change data in csv file + + r = rdata(row.csvfilename) + if r == 0: + return HttpResponse("Error: CSV Data File Not Found") + r.rowdatetime = startdatetime + r.write_csv(row.csvfilename,gzip=True) + dataprep.update_strokedata(id,r.df) + successmessage = "Changes saved" - if rankingpiece: - dataprep.runcpupdate(row.user,type=row.workouttype) + if rankingpiece: + dataprep.runcpupdate(row.user,type=row.workouttype) - messages.info(request,successmessage) - url = reverse(workout_edit_view, - kwargs = { - 'id':str(row.id), - }) - response = HttpResponseRedirect(url) - else: - message = "You are not allowed to change this workout" - messages.error(request,message) - url = reverse(workouts_view) - - response = HttpResponseRedirect(url) + messages.info(request,successmessage) + url = reverse(workout_edit_view, + kwargs = { + 'id':str(row.id), + }) + response = HttpResponseRedirect(url) #else: # form not POSTed form = WorkoutForm(instance=row) @@ -9203,15 +9231,6 @@ def workout_edit_view(request,id=0,message="",successmessage=""): pass - # check if user is owner of this workout - - comments = WorkoutComment.objects.filter(workout=row) - - aantalcomments = len(comments) - - if (checkworkoutuser(request.user,row)==False): - raise PermissionDenied("Access denied") - # create interactive plot f1 = row.csvfilename u = row.user.user @@ -9245,34 +9264,40 @@ def workout_edit_view(request,id=0,message="",successmessage=""): except KeyError: pass + breadcrumbs = [ + { + 'url':'/rowers/list-workouts', + 'name':'Workouts' + }, + { + 'url':get_workout_default_page(request,id), + 'name': str(row.id) + }, + { + 'url':reverse(workout_edit_view,kwargs={'id':id}), + 'name': 'Edit' + } + + ] + + r = getrower(request.user) + # render page - if (len(g)<=3): - return render(request, 'workout_form.html', - {'form':form, - 'workout':row, - 'teams':get_my_teams(request.user), - 'graphs1':g[0:3], - 'mapscript':mapscript, - 'aantalcomments':aantalcomments, - 'mapdiv':mapdiv, - 'rower':r, - }) - - else: - return render(request, 'workout_form.html', - {'form':form, - 'teams':get_my_teams(request.user), - 'workout':row, - 'graphs1':g[0:3], - 'graphs2':g[3:6], - 'mapscript':mapscript, - 'aantalcomments':aantalcomments, - 'mapdiv':mapdiv, - 'rower':r, - }) + return render(request, 'workout_form.html', + {'form':form, + 'workout':row, + 'teams':get_my_teams(request.user), + 'graphs':g, + 'breadcrumbs':breadcrumbs, + 'rower':r, + 'active':'nav-workouts', + 'mapscript':mapscript, + 'mapdiv':mapdiv, + 'rower':r, + }) + - return HttpResponseRedirect(url) @login_required() def workout_map_view(request,id=0): diff --git a/static/css/rowsandall2.css b/static/css/rowsandall2.css index bf6518fa..a55eb415 100644 --- a/static/css/rowsandall2.css +++ b/static/css/rowsandall2.css @@ -332,6 +332,261 @@ th.rotate > div > span { color: #fcd3a5; } +/* CSS talk bubble */ +.talk-bubble { + margin: 40px; + display: inline-block; + position: relative; + width: 200px; + height: auto; + background-color: lightyellow; +} +.border{ + border: 8px solid #666; +} +.round{ + border-radius: 30px; + -webkit-border-radius: 30px; + -moz-border-radius: 30px; + +} + +/* Right triangle placed top left flush. */ +.tri-right.border.left-top:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: -40px; + right: auto; + top: -8px; + bottom: auto; + border: 32px solid; + border-color: #666 transparent transparent transparent; +} +.tri-right.left-top:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: -20px; + right: auto; + top: 0px; + bottom: auto; + border: 22px solid; + border-color: lightyellow transparent transparent transparent; +} + +/* Right triangle, left side slightly down */ +.tri-right.border.left-in:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: -40px; + right: auto; + top: 30px; + bottom: auto; + border: 20px solid; + border-color: #666 #666 transparent transparent; +} +.tri-right.left-in:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: -20px; + right: auto; + top: 38px; + bottom: auto; + border: 12px solid; + border-color: lightyellow lightyellow transparent transparent; +} + +/*Right triangle, placed bottom left side slightly in*/ +.tri-right.border.btm-left:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: -8px; + right: auto; + top: auto; + bottom: -40px; + border: 32px solid; + border-color: transparent transparent transparent #666; +} +.tri-right.btm-left:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: 0px; + right: auto; + top: auto; + bottom: -20px; + border: 22px solid; + border-color: transparent transparent transparent lightyellow; +} + +/*Right triangle, placed bottom left side slightly in*/ +.tri-right.border.btm-left-in:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: 30px; + right: auto; + top: auto; + bottom: -40px; + border: 20px solid; + border-color: #666 transparent transparent #666; +} +.tri-right.btm-left-in:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: 38px; + right: auto; + top: auto; + bottom: -20px; + border: 12px solid; + border-color: lightyellow transparent transparent lightyellow; +} + +/*Right triangle, placed bottom right side slightly in*/ +.tri-right.border.btm-right-in:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: 30px; + bottom: -40px; + border: 20px solid; + border-color: #666 #666 transparent transparent; +} +.tri-right.btm-right-in:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: 38px; + bottom: -20px; + border: 12px solid; + border-color: lightyellow lightyellow transparent transparent; +} +/* + left: -8px; + right: auto; + top: auto; + bottom: -40px; + border: 32px solid; + border-color: transparent transparent transparent #666; + left: 0px; + right: auto; + top: auto; + bottom: -20px; + border: 22px solid; + border-color: transparent transparent transparent lightyellow; + +/*Right triangle, placed bottom right side slightly in*/ +.tri-right.border.btm-right:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: -8px; + bottom: -40px; + border: 20px solid; + border-color: #666 #666 transparent transparent; +} +.tri-right.btm-right:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: 0px; + bottom: -20px; + border: 12px solid; + border-color: lightyellow lightyellow transparent transparent; +} + +/* Right triangle, right side slightly down*/ +.tri-right.border.right-in:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: -40px; + top: 30px; + bottom: auto; + border: 20px solid; + border-color: #666 transparent transparent #666; +} +.tri-right.right-in:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: -20px; + top: 38px; + bottom: auto; + border: 12px solid; + border-color: lightyellow transparent transparent lightyellow; +} + +/* Right triangle placed top right flush. */ +.tri-right.border.right-top:before { + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: -40px; + top: -8px; + bottom: auto; + border: 32px solid; + border-color: #666 transparent transparent transparent; +} +.tri-right.right-top:after{ + content: ' '; + position: absolute; + width: 0; + height: 0; + left: auto; + right: -20px; + top: 0px; + bottom: auto; + border: 20px solid; + border-color: lightyellow transparent transparent transparent; +} + +/* talk bubble contents */ +.talktext{ + padding: 1em; + text-align: left; + line-height: 1.5em; + word-wrap: break-word; +} +.talktext p{ + /* remove webkit p margins */ + -webkit-margin-before: 0em; + -webkit-margin-after: 0em; +} + +.drop-files { + border: 1px solid #000; + color: #000; + +} + .input { font: 1.1em/1.5em sans-serif; @@ -609,260 +864,6 @@ a.wh:hover { padding: 5% 5%; } -/* CSS talk bubble */ -.talk-bubble { - margin: 40px; - display: inline-block; - position: relative; - width: 200px; - height: auto; - background-color: lightyellow; -} -.border{ - border: 8px solid #666; -} -.round{ - border-radius: 30px; - -webkit-border-radius: 30px; - -moz-border-radius: 30px; - -} - -/* Right triangle placed top left flush. */ -.tri-right.border.left-top:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: -40px; - right: auto; - top: -8px; - bottom: auto; - border: 32px solid; - border-color: #666 transparent transparent transparent; -} -.tri-right.left-top:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: -20px; - right: auto; - top: 0px; - bottom: auto; - border: 22px solid; - border-color: lightyellow transparent transparent transparent; -} - -/* Right triangle, left side slightly down */ -.tri-right.border.left-in:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: -40px; - right: auto; - top: 30px; - bottom: auto; - border: 20px solid; - border-color: #666 #666 transparent transparent; -} -.tri-right.left-in:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: -20px; - right: auto; - top: 38px; - bottom: auto; - border: 12px solid; - border-color: lightyellow lightyellow transparent transparent; -} - -/*Right triangle, placed bottom left side slightly in*/ -.tri-right.border.btm-left:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: -8px; - right: auto; - top: auto; - bottom: -40px; - border: 32px solid; - border-color: transparent transparent transparent #666; -} -.tri-right.btm-left:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: 0px; - right: auto; - top: auto; - bottom: -20px; - border: 22px solid; - border-color: transparent transparent transparent lightyellow; -} - -/*Right triangle, placed bottom left side slightly in*/ -.tri-right.border.btm-left-in:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: 30px; - right: auto; - top: auto; - bottom: -40px; - border: 20px solid; - border-color: #666 transparent transparent #666; -} -.tri-right.btm-left-in:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: 38px; - right: auto; - top: auto; - bottom: -20px; - border: 12px solid; - border-color: lightyellow transparent transparent lightyellow; -} - -/*Right triangle, placed bottom right side slightly in*/ -.tri-right.border.btm-right-in:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: 30px; - bottom: -40px; - border: 20px solid; - border-color: #666 #666 transparent transparent; -} -.tri-right.btm-right-in:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: 38px; - bottom: -20px; - border: 12px solid; - border-color: lightyellow lightyellow transparent transparent; -} -/* - left: -8px; - right: auto; - top: auto; - bottom: -40px; - border: 32px solid; - border-color: transparent transparent transparent #666; - left: 0px; - right: auto; - top: auto; - bottom: -20px; - border: 22px solid; - border-color: transparent transparent transparent lightyellow; - -/*Right triangle, placed bottom right side slightly in*/ -.tri-right.border.btm-right:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: -8px; - bottom: -40px; - border: 20px solid; - border-color: #666 #666 transparent transparent; -} -.tri-right.btm-right:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: 0px; - bottom: -20px; - border: 12px solid; - border-color: lightyellow lightyellow transparent transparent; -} - -/* Right triangle, right side slightly down*/ -.tri-right.border.right-in:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: -40px; - top: 30px; - bottom: auto; - border: 20px solid; - border-color: #666 transparent transparent #666; -} -.tri-right.right-in:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: -20px; - top: 38px; - bottom: auto; - border: 12px solid; - border-color: lightyellow transparent transparent lightyellow; -} - -/* Right triangle placed top right flush. */ -.tri-right.border.right-top:before { - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: -40px; - top: -8px; - bottom: auto; - border: 32px solid; - border-color: #666 transparent transparent transparent; -} -.tri-right.right-top:after{ - content: ' '; - position: absolute; - width: 0; - height: 0; - left: auto; - right: -20px; - top: 0px; - bottom: auto; - border: 20px solid; - border-color: lightyellow transparent transparent transparent; -} - -/* talk bubble contents */ -.talktext{ - padding: 1em; - text-align: left; - line-height: 1.5em; - word-wrap: break-word; -} -.talktext p{ - /* remove webkit p margins */ - -webkit-margin-before: 0em; - -webkit-margin-after: 0em; -} - -.drop-files { - border: 1px solid #000; - color: #000; - -} .wrapwords{ -ms-word-break: break-all;