Skip to content

Commit

Permalink
add tutorial videos
Browse files Browse the repository at this point in the history
  • Loading branch information
= committed Sep 5, 2024
1 parent 71dbe17 commit 1b85e1b
Show file tree
Hide file tree
Showing 8 changed files with 284 additions and 90 deletions.
14 changes: 14 additions & 0 deletions auctions/models.py
Original file line number Diff line number Diff line change
Expand Up @@ -1317,6 +1317,20 @@ def location_link(self):
return reverse("edit_pickup", kwargs={"pk": self.location_qs.first().pk})
return reverse("auction_pickup_location", kwargs={"slug": self.slug})

@property
def video_tutorial(self):
if self.is_online:
return settings.ONLINE_TUTORIAL_YOUTUBE_ID
else:
return settings.IN_PERSON_TUTORIAL_YOUTUBE_ID

@property
def video_tutorial_chapters(self):
if self.is_online:
return settings.ONLINE_TUTORIAL_CHAPTERS
else:
return settings.IN_PERSON_TUTORIAL_CHAPTERS


class PickupLocation(models.Model):
"""
Expand Down
29 changes: 29 additions & 0 deletions auctions/templates/auction_help.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{% extends "base.html" %}
{% block title %}Help for {{ auction }}{% endblock %}
{% load static %}
{% block content %}
{% include 'auction_ribbon.html' %}
<h5>Help and support</h5>
<div>
This video will walk you through the entire process of running your auction.
</div>
{% include 'youtube_embed.html' with videoId=auction.video_tutorial chapters=auction.video_tutorial_chapters %}
<div>
<h5>Still got questions?</h5>
<a href="{% url 'faq' %}">The FAQ covers nearly all questions</a><p>
</div>
<div>
<h5>Found a bug? Got a request for a new feature?</h5>
<a href="https://github.com/iragm/fishauctions/issues/">Open a GitHub issue</a><br>
<small><span class='text-muted'>Github is the best place to report issues and suggest features, as other uses can provide feedback.</span></small><p>
</div>
<div>
<h5>Still need help?</h5>
Contact me at {{ admin_email | urlize }}<br>
<small><span class='text-muted'>Please, watch the video and read the FAQ <span class='text-warning'>before</span> emailing. This is a volunteer-run project and help is provided on a limited basis.</span></small>
</div>


{% endblock %}
{% block extra_js %}
{% endblock %}
5 changes: 3 additions & 2 deletions auctions/templates/auction_ribbon.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ <h3>{{auction}}</h3>
<li>{% if auction.admin_checklist_additional_admin %}<i class="bi bi-check-square-fill text-success"></i>{% else %}<i class="bi bi-exclamation-square-fill text-danger"></i>{%endif%} Click a name to edit that user and <a href="/auctions/{{auction.slug}}/users">add an additional admin</a> to help you set lot winners</li>
{% endif %}
</ul>
<small class="'text-muted">This message will disappear once you've finished setting up your auction.</small>
<div>Having trouble? <a href='{% url "auction_help" slug=auction.slug %}'>Click here to get help</a></div>
<small class="text-muted">This message will disappear once you've finished setting up your auction.</small>
</div>
{% endif %}
{% endif %}
Expand All @@ -38,7 +39,7 @@ <h3>{{auction}}</h3>
<a class="dropdown-item" href="{{ auction.location_link }}"><i class="bi bi-geo-alt-fill"></i> Location{% if auction.location_qs|length > 1 %}s{% endif %}</a>
<a class="dropdown-item" href="{{ auction.set_lot_winners_link }}"><i class="bi bi-calendar-check"></i> Set lot winners</a>
<a class="dropdown-item" href="/auctions/{{auction.slug}}/chat/"><i class="bi bi-chat-fill"></i> Chat messages</a>
<a class="dropdown-item" href="/faq"><i class="bi bi-question-circle-fill"></i> Help and Support</a>
<a class="dropdown-item" href='{% url "auction_help" slug=auction.slug %}'><i class="bi bi-question-circle-fill"></i> Help and Support</a>
<a class="dropdown-item" href="/auctions/new?copy={{auction.slug}}"><i class="bi bi-plus-circle"></i> Copy to new auction</a>
<a class="dropdown-item" href="/auctions/{{auction.slug}}/stats/"><i class="bi bi-graph-up"></i> Stats</a>
{% if not auction.is_online %}<a class="dropdown-item" href='{% url "auction_printing" slug=auction.slug %}'><i class="bi bi-tags"></i> Print labels</a>{% endif %}
Expand Down
152 changes: 75 additions & 77 deletions auctions/templates/promo.html
Original file line number Diff line number Diff line change
Expand Up @@ -160,110 +160,108 @@ <h5>This site provides all the tools you need to run traditional, in-person auct
</ol>
<p class="lead"><span class="it_gets_easier" style="visibility:hidden;">It gets easier with online auctions.</span> <span
style="visibility:hidden;" class='free text-info'>Still completely free.</span></p>


<div class="jumbotron jumbotron-fluid bg-primary">
<div class="container">
<h1 class="display-4">Easy to use. Better for everyone.</h1>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Online auctions benefit everyone</div>
<div class="card-body">
<h4 class="card-title">Buyers and sellers</h4>
<h3><img style='max-width:2em' src="{% static 'red_tail_cat.svg' %}" class="card-img-top" alt="Don't buy big fish"></h3>
<p class="card-text">Take your time and research items before you bid
<p>Set a minimum bid, so your items always sell for what they're worth</p>
<p>No need to pack and transport unsold items</p>
</p>
<div class="col-lg-4 col-md-6">
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Online auctions benefit everyone</div>
<div class="card-body">
<h4 class="card-title">Buyers and sellers</h4>
<h3><img style='max-width:2em' src="{% static 'red_tail_cat.svg' %}" class="card-img-top" alt="Don't buy big fish"></h3>
<p class="card-text">Take your time and research items before you bid
<p>Set a minimum bid, so your items always sell for what they're worth</p>
<p>No need to pack and transport unsold items</p>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">A game-changer for clubs</div>
<div class="card-body">
<h4 class="card-title">Clubs</h4>
<p class="card-text">
<p>Attract new members</p>
<p>No location rental costs</p>
<p>No auctioneer costs</p>
<p>Save time and hassle setting up</p>
</p>
<div class="col-lg-4 col-md-6">
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">A game-changer for clubs</div>
<div class="card-body">
<h4 class="card-title">Clubs</h4>
<p class="card-text">
<p>Attract new members</p>
<p>No location rental costs</p>
<p>No auctioneer costs</p>
<p>Save time and hassle setting up</p>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Your auction, your way</div>
<div class="card-body">
<h4 class="card-title">Pants optional</h4>
<p class="card-text"></p>
Bid from the comfort of your home<br>
<h3><img style='max-width:1em' src="{% static 'glass.svg' %}" class="card-img-top" alt="Don't drink and bid"></h3>
<span class='text-info'>Sturgeon general's warning:</span> consumption of alcohol while bidding may be
beneficial to your club's finances<br><br>
</p>
<div class="col-lg-4 col-md-6">
<div class="card border-secondary mb-3" style="max-width: 20rem;">
<div class="card-header">Your auction, your way</div>
<div class="card-body">
<h4 class="card-title">Pants optional</h4>
<p class="card-text"></p>
Bid from the comfort of your home<br>
<h3><img style='max-width:1em' src="{% static 'glass.svg' %}" class="card-img-top" alt="Don't drink and bid"></h3>
<span class='text-info'>Sturgeon general's warning:</span> consumption of alcohol while bidding may be
beneficial to your club's finances<br><br>
</p>
</div>
</div>
</div>
</div>
<h1 class="text-end"><span class='magic'>Awesome.</span></h1>
</div>
<h1 class="text-end"><span class='magic'>Awesome.</span></h1>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-lg-4">
<figure class="text-end">
<blockquote class="blockquote">
<p class="mb-0">I was reluctant at first, but after buying and selling, I am convinced this is the next generation of fish auctions. I love the fact my fish don't sit on a cold table all day long.</p>
</blockquote>
<figcaption class="blockquote-footer">rob.vermont</figcaption>
</figure>
</div>
<div class="col-lg-4">
<figure class="text-end">
<blockquote class="blockquote">
<p class="mb-0">Amazing! The best auction software I've ever seen</p>
</blockquote>
<figcaption class="blockquote-footer">Janine Banks</figcaption>
</figure>
</div>
<div class="col-lg-4">
<figure class="text-end">
<blockquote class="blockquote">
<p class="mb-0">This electronic age shit sucks !!!</p>
</blockquote>
<figcaption class="blockquote-footer">John Krol</figcaption>
</figure>
</div>
</div>


<div class="row">
<div class="col-lg-4">
<figure class="text-end">
<blockquote class="blockquote">
<p class="mb-0">I was reluctant at first, but after buying and selling, I am convinced this is the next generation of fish auctions. I love the fact my fish don't sit on a cold table all day long.</p>
</blockquote>
<figcaption class="blockquote-footer">rob.vermont</figcaption>
</figure>
</div>
<div class="col-lg-4">
<figure class="text-end">
<blockquote class="blockquote">
<p class="mb-0">Amazing! The best auction software I've ever seen</p>
</blockquote>
<figcaption class="blockquote-footer">Janine Banks</figcaption>
</figure>
</div>
<div class="col-lg-4">
<figure class="text-end">
<blockquote class="blockquote">
<p class="mb-0">This electronic age shit sucks !!!</p>
</blockquote>
<figcaption class="blockquote-footer">John Krol</figcaption>
</figure>
</div>
</div>
</div>
{% include 'youtube_embed.html' with videoId=online_tutorial chapters=online_tutorial_chapters %}
</div>
</div>
</div>
</div>

</div>
<div class="tab-pane fade show" id="runInPersonAuction">
<br>
<h4>All the software you need to run an in-person auction</h4>
<ul>
<li>Manage users and lots</li>
<li>Quickly and easily set lot winners</li>
<li>Get help from friends* to run the auction<br>
<span class="text-muted"><small>*Friends not included -- you'll have to make some along the way</small></span></li>
<li>Minimum bid (reserve) and buy now prices</li>
<li>Using a projector, show pictures of a lot as it's being auctioned off</li>
<li>Support for Breeder Award Programs/Breeder Participation Programs</li>
<li>Easily copy lots, rules, and users between auctions</li>
<li>One click export of data to generate marketing lists</li>
<li>Different seller and club cuts for club members</li>
<li>Automatic invoicing</li>
<li>Make other users admins to help run the auction</li>
<li>...and more!</li>
</ul>
<br>
{% include 'youtube_embed.html' with videoId=in_person_tutorial chapters=in_person_tutorial_chapters %}
</div>




<div style="background:transparent !important" class="jumbotron jumbotron-fluid bg-primary">
<div class="container">
<h2 class="display-4">Ready to get started?</h2>
Expand Down
69 changes: 69 additions & 0 deletions auctions/templates/youtube_embed.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<div class="video-container">
<div id="player_{{videoId}}" class="embed-responsive"></div>
</div>

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = {};

function onYouTubeIframeAPIReady() {
var videoElements = document.querySelectorAll('[id^=player_]');
videoElements.forEach(function(el) {
var videoId = el.id.replace('player_', '');
players[videoId] = new YT.Player(el.id, {
height: getPlayerHeight(),
width: getPlayerWidth(),
videoId: videoId,
playerVars: {
'playsinline': 1
},
});
});
}

function jumpToTime(videoId, seconds) {
if (players[videoId] && players[videoId].seekTo) {
players[videoId].seekTo(seconds, true);
players[videoId].playVideo();
}
}

// Helper functions to get responsive width and height
function getPlayerWidth() {
if (window.innerWidth >= 1024) {
return 875; // Larger width for tablets and desktops
} else {
return 583; // Default width for smaller screens (phones)
}
}

function getPlayerHeight() {
if (window.innerWidth >= 1024) {
return 531; // Corresponding height for the larger width
} else {
return 354; // Default height for smaller screens
}
}

// Recalculate the player sizes on window resize
window.addEventListener('resize', function() {
Object.keys(players).forEach(function(videoId) {
players[videoId].setSize(getPlayerWidth(), getPlayerHeight());
});
});
</script>

{% if chapters %}
<div>
<h5>Jump to content in this video</h5>
<ul>
{% for seconds, chapter in chapters %}
<li><a href="javascript:void(0)" onclick="jumpToTime('{{videoId}}', {{seconds}})">{{ chapter }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
5 changes: 5 additions & 0 deletions auctions/urls.py
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,11 @@
login_required(views.AuctionUsers.as_view()),
name="auction_tos_list",
),
path(
"auctions/<slug:slug>/help/",
login_required(views.AuctionHelp.as_view()),
name="auction_help",
),
path(
"auctions/<slug:slug>/users/bulk-add/",
login_required(views.BulkAddUsers.as_view()),
Expand Down
Loading

0 comments on commit 1b85e1b

Please sign in to comment.